AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/blogpost.tsx
View File

@@ -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';
@@ -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>