🔖 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:
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user