From fd3563d1249e1924569e1f75ab3eb91e4f369375 Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Wed, 26 Mar 2025 14:14:33 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=96=20feat(BlogPost):=20Add=20link=20t?=
 =?UTF-8?q?o=20blog=20post=20tags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/blogpost.tsx b/components/blogpost.tsx
index 281f5dd..47b5e1d 100644
--- a/components/blogpost.tsx
+++ b/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>