Fixed tags in posts

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

@@ -1,19 +1,19 @@
 ---
-import { getCollection, type CollectionEntry } from 'astro:content';
+import { getCollection, type CollectionEntry } from "astro:content";
-import { Icon } from 'astro-icon/components';
+import { Icon } from "astro-icon/components";
-import Layout from '../../layouts/Layout.astro';
+import Layout from "../../layouts/Layout.astro";
 
 export const prerender = true;
 
 export async function getStaticPaths() {
-  const posts = await getCollection('posts');
+    const posts = await getCollection("posts");
-  return posts.map((post: CollectionEntry<'posts'>) => ({
+    return posts.map((post: CollectionEntry<"posts">) => ({
         params: { slug: post.slug },
         props: { post },
     }));
 }
 
-const { post }: { post: CollectionEntry<'posts'> } = Astro.props;
+const { post }: { post: CollectionEntry<"posts"> } = Astro.props;
 const { Content } = await post.render();
 ---
 
@@ -26,14 +26,21 @@ const { Content } = await post.render();
                 </h1>
 
                 <div class="flex flex-wrap items-center gap-4 mb-6">
-          <div class="flex items-center flex-row gap-2 text-base-content opacity-75">
+                    <div
+                        class="flex items-center flex-row gap-2 text-base-content opacity-75"
+                    >
                         <Icon name="mdi:clock" class="text-xl" />
                         <time datetime={post.data.pubDate.toISOString()}>
-              {new Date(post.data.pubDate).toLocaleDateString('en-us', {
+                            {
-                month: 'long',
+                                new Date(post.data.pubDate).toLocaleDateString(
-                day: 'numeric',
+                                    "en-us",
-                year: 'numeric',
+                                    {
-              })}
+                                        month: "long",
+                                        day: "numeric",
+                                        year: "numeric",
+                                    },
+                                )
+                            }
                         </time>
                     </div>
 
@@ -44,18 +51,22 @@ const { Content } = await post.render();
                     </a>
                 </div>
 
-        {post.data.tags && post.data.tags.length > 0 && (
+                {
+                    post.data.tags && post.data.tags.length > 0 && (
                         <div class="flex gap-2 flex-wrap mb-6">
                             {post.data.tags.map((tag: string) => (
-              <span class="flex items-center flex-row gap-2 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
+                                <div class="badge badge-primary">
                                     <Icon name="mdi:tag" class="text-lg" />
                                     {tag}
-              </span>
+                                </div>
                             ))}
                         </div>
-        )}
+                    )
+                }
 
-        <article class="prose prose-lg dark:prose-invert max-w-none mt-6">
+                <article
+                    class="prose prose-lg dark:prose-invert max-w-none mt-6"
+                >
                     <Content />
                 </article>
             </div>