Some™️Pages

src/pages/announcements/[...slug].astro

@@ -30,15 +30,13 @@ const { Content } = await post.render();
 <PageLayout title={post.data.title}>
     <article>
         <h1 class="text-4xl mb-0">{post.data.title}</h1>
-        <h3 class="flex items-center mt-0 text-neutral-300"><TagSolid class="w-4 h-4 mr-2" /> {post.data.tags.map(tag => (
-                <a href={l(`/announcements/tags/${tag}`)}>
-                    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 shadow-2xl">{capitalize(tag)}</span>
-                </a>
+        <h5 class="flex items-center mt-0 text-neutral-300"><TagSolid class="w-4 h-4 mr-2" /> {post.data.tags.map(tag => (
+                <TagComponent tag={tag} />
         ))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
             day: 'numeric',
             month: 'short',
             year: 'numeric'
-        }).format(post.data.created)} </h3>
+        }).format(post.data.created)} </h5>
         <Content />
         <script>
             import type {ExtendedEvent} from "../../components/types/event";