🔖 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.
This commit is contained in:
AderKonstantin
2025-03-26 14:14:33 +03:00
parent 600a734ad4
commit fd3563d124

View File

@@ -3,6 +3,7 @@
import tagsPic from '../public/tags.svg'; import tagsPic from '../public/tags.svg';
import calendarPic from '../public/calendar.svg' import calendarPic from '../public/calendar.svg'
import Link from 'next/link';
import AnimatedLink from '../components/animatedLink'; import AnimatedLink from '../components/animatedLink';
import Image from 'next/image'; import Image from 'next/image';
@@ -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"> <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> <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) => ( {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> </ul>
<div className="blogpost-description text-base mb-4"> <div className="blogpost-description text-base mb-4">