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

✨ feat(blog): Add tags to blog posts and display them

Browse Source 
Adds a new `tags` field to the `BlogPost` interface and updates the blog post data to include relevant tags.
The `BlogArea` component is updated to display the tags for each blog post.

This change allows users to better understand the topics covered in each blog post and
improves the overall user experience.
This commit is contained in:
AderKonstantin
2025-03-26 13:48:55 +03:00
parent 7113768663
commit 67e05438a7
2 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/blogpost.tsx
View File

@@ -11,6 +11,7 @@ interface BlogPost {
body: string;
publish: string;
get_absolute_url: string;
tags: string[];
}
interface BlogAreaProps {
@@ -44,8 +45,9 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
</div>
<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 border border-slate-400 px-2 py-1 rounded-full text-base">Games</li>
<li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">Science</li>
{blogpost.tags.map((tag, index) => (
<li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">{tag}</li>
))}
</ul>
<div className="blogpost-description text-base mb-4">
{blogpost.body.slice(0, 512)}...