feat: add tag component

app/blog/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { formatDate } from "@/lib/formatDate";
 import MDXContent from "@/components/mdxContent";
 import { notFound } from 'next/navigation';
 import TableOfContents from '@/components/tableOfContents';
+import Tag from '@/components/tag';
 
 export async function generateStaticParams() {
   return allBlogs
@@ -41,6 +42,7 @@ export default function Page({ params }) {
           <p>{formatDate(blog?.publishedAt)}</p>
           <p className='justify-self-end'>views</p>
         </div>
+        <Tag blog={blog} />
         <TableOfContents blog={blog} />
         <MDXContent code={blog?.body.code}/>
       </div>

components/tag.tsx

@@ -0,0 +1,19 @@
+//@ts-ignore
+export default function Tag({ blog }) {
+  return (
+    <div className="text-neutral-600 dark:text-neutral-400 text-base rounded-lg mb-4 overflow-hidden overflow-y-auto ">
+      {//@ts-ignore
+        blog.tags.map((tag, index) => {
+          return (
+            <>
+              <a href={`#${tag}`}>
+                <span className="hover:underline">{`#${tag}`}</span>
+              </a>
+              {index !== blog.tags.length - 1 && ", "} {/* Add a comma after each tag except the last one */}
+            </>
+          )
+        })
+      }
+    </div>
+  )
+}