fix categories and tags index pages

Author: nemanjam

docs/working-notes/todo3.md

@@ -389,8 +389,8 @@ mdx format adds new lines and paddings to paragraphs
 pagination align bottom, mobile problem...
 subfolders in components, working notes in docs folder
 fix title text in metadata, dot separator
-style share, add text
-restyle scroll to top, must be moved from solid to astro - cactus
+    style share, add text
+    restyle scroll to top, must be moved from solid to astro - cactus
 
 satori can define og image with html, astro-canvas limited
 satori understands only react jsx, not solid-js
@@ -401,7 +401,7 @@ solid-js style prop dash case 'border-radius': '3px'
     add random hero images for mdx and list pages, and maybe random gradient, handle longer domain in new row
     fix folders in assets/images
     pages/design, sve .mdx index stranice, fix in metadata, endsWith('/') // fixed in getPages()
-replace solid with react and jsx config
+    replace solid with react and jsx config
 giscus, share add text, transitions, shorter commit info footer
 write content for home and about
 write readme and credits
@@ -420,5 +420,6 @@ alert component style
 improve lighthouse, accessibility, aria attrs
 2 prerendered paginations, 3 and 5 items
 must export_ vars in .mdx or acor error, ask?
+define color themes
 ```
 

src/components/CategoryCard.astro

@@ -1,8 +1,10 @@
 ---
-import { getCategoryLinks } from '@/modules/post/category';
+import { Icon } from 'astro-icon/components';
+
+import { getCategoryLinks, getCategoryProps } from '@/modules/post/category';
 import { getAllPosts } from '@/modules/post/common';
 import List from '@/layouts/List.astro';
-import CategoryCard from '@/components/CategoryCard.astro';
+import Button from '@/components/Button.astro';
 import FilterList from '@/components/FilterList.astro';
 import { getPageMetadata } from '@/utils/metadata';
 
@@ -18,11 +20,16 @@ const metadata = getPageMetadata('lists/blog/categories');
   <section>
     <FilterList class="mb-4" itemLinks={categoryLinks}>
       {
-        ({ href, text, textWithCount }: FilterLink) => (
-          <CategoryCard href={href} category={text}>
-            {textWithCount}
-          </CategoryCard>
-        )
+        ({ href, text, textWithCount }: FilterLink) => {
+          const { icon } = getCategoryProps(text);
+
+          return (
+            <Button href={href} size="md">
+              <Icon name={icon} slot="before-icon" />
+              {textWithCount}
+            </Button>
+          );
+        }
       }
     </FilterList>
   </section>

src/pages/blog/categories/index.astro

@@ -5,7 +5,6 @@ import List from '@/layouts/List.astro';
 import FilterList from '@/components/FilterList.astro';
 import Tag from '@/components/Tag.astro';
 import { getPageMetadata } from '@/utils/metadata';
-import { cn } from '@/utils/styles';
 
 import type { FilterLink } from '@/types/post';
 
@@ -21,7 +20,7 @@ const metadata = getPageMetadata('lists/blog/tags');
     <FilterList class="mb-4" itemLinks={tagLinks}>
       {
         ({ href, textWithCount, isActive }: FilterLink) => (
-          <Tag href={href} size="md" class={cn({ 'underline font-bold text-accent': isActive })}>
+          <Tag href={href} size="md" colors={isActive ? 'primary' : 'default'}>
             {textWithCount}
           </Tag>
         )