@@ -6,52 +6,55 @@ const { tags, categories, allCategories } = Astro.props;
66const lang = getLangFromUrl (Astro .url );
77---
88
9- <div class =" lg:col-4" >
10- <!-- categories -->
11- <div class =" mb-8" >
12- <h5 class =" mb-6" >Categories</h5 >
13- <div class =" rounded bg-theme-light p-8 dark:bg-darkmode-theme-light" >
14- <ul class =" space-y-4" >
15- {
16- categories .map ((category : any ) => {
17- const count = allCategories .filter (
18- (c : any ) => c === category
19- ).length ;
20- return (
21- <li >
22- <a
23- class = " flex justify-between hover:text-primary dark:hover:text-darkmode-primary"
24- href = { slugSelector (` /categories/${category } ` , lang )}
25- >
26- { humanize (category )} <span >({ count } )</span >
27- </a >
28- </li >
29- );
30- })
31- }
32- </ul >
9+ <div class =" w-full" >
10+ <div class =" flex flex-col gap-8" >
11+ <!-- categories -->
12+ <div >
13+ <h5 class =" mb-6" >Categories</h5 >
14+ <div class =" rounded bg-theme-light p-6 dark:bg-darkmode-theme-light" >
15+ <ul class =" flex flex-wrap gap-2" >
16+ {
17+ categories .map ((category : any ) => {
18+ const count = allCategories .filter (
19+ (c : any ) => c === category
20+ ).length ;
21+ return (
22+ <li class = " inline-block" >
23+ <a
24+ class = " block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
25+ href = { slugSelector (` /categories/${category } ` , lang )}
26+ >
27+ { humanize (category )} <span class = " text-sm" >({ count } )</span >
28+ </a >
29+ </li >
30+ );
31+ })
32+ }
33+ </ul >
34+ </div >
3335 </div >
34- </div >
35- <!-- tags -->
36- <div class =" mb-8" >
37- <h5 class =" mb-6" >Tags</h5 >
38- <div class =" rounded bg-theme-light p-6 dark:bg-darkmode-theme-light" >
39- <ul >
40- {
41- tags .map ((tag : any ) => {
42- return (
43- <li class = " inline-block" >
44- <a
45- class = " m-1 block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
46- href = { slugSelector (` /tags/${tag } ` , lang )}
47- >
48- { humanize (tag )}
49- </a >
50- </li >
51- );
52- })
53- }
54- </ul >
36+
37+ <!-- tags -->
38+ <div >
39+ <h5 class =" mb-6" >Tags</h5 >
40+ <div class =" rounded bg-theme-light p-6 dark:bg-darkmode-theme-light" >
41+ <ul class =" flex flex-wrap gap-2" >
42+ {
43+ tags .map ((tag : any ) => {
44+ return (
45+ <li class = " inline-block" >
46+ <a
47+ class = " block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
48+ href = { slugSelector (` /tags/${tag } ` , lang )}
49+ >
50+ { humanize (tag )}
51+ </a >
52+ </li >
53+ );
54+ })
55+ }
56+ </ul >
57+ </div >
5558 </div >
5659 </div >
5760</div >
0 commit comments