🔖 feat(BlogPost): Add link to blog post tags

Adds a link to each blog post tag, allowing users to navigate to a
page that displays all posts with the selected tag. This improves the
user experience by providing an easy way to explore related content.

components/blogpost.tsx

@@ -3,6 +3,7 @@
 import tagsPic from '../public/tags.svg';
 import calendarPic from '../public/calendar.svg'
 
+import Link from 'next/link';
 import AnimatedLink from '../components/animatedLink';
 import Image from 'next/image';
 
@@ -11,7 +12,7 @@ interface BlogPost {
     body: string;
     publish: string;
     get_absolute_url: string;
-    tags: string[]; 
+    tags: string[];
 }
 
 interface BlogAreaProps {
@@ -46,7 +47,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                             <ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4">
                                 <li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li>
                                 {blogpost.tags.map((tag, index) => (
-                                <li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">{tag}</li>
+                                    <li key={`${tag}-${index}`} className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base"><Link href="#">{tag}</Link></li>
                                 ))}
                             </ul>
                             <div className="blogpost-description text-base mb-4">
@@ -54,7 +55,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                             </div>
                             <div className="blogpost-other flex flex-row justify-between items-end mt-auto">
                                 <ul className="text-base inline-flex justify-end items-center">
-                                    <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert"/></li>
+                                    <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert" /></li>
                                     <li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li>
                                 </ul>