From 67e05438a7cb4cb0ffb357adc0961bc6ebb6d349 Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Wed, 26 Mar 2025 13:48:55 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(blog):=20Add=20tags=20to=20blo?=
 =?UTF-8?q?g=20posts=20and=20display=20them?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 app/page.tsx            | 4 ++++
 components/blogpost.tsx | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index a258099..66f4fcc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -22,24 +22,28 @@ const blogposts = [
     body: 'Explore the fascinating world of retro futurism and its impact on modern science and culture.',
     publish: '2023-10-01',
     get_absolute_url: '/blog/retro-futurism',
+    tags: ["science", "retro", "science-friction"]
   },
   {
     label: 'The Science Behind Video Games',
     body: 'Discover how video games are pushing the boundaries of technology and human interaction.',
     publish: '2023-09-25',
     get_absolute_url: '/blog/science-video-games',
+    tags: ["science", "math", "games"]
   },
   {
     label: 'How to install Docker & Docker Compose',
     body: 'Guide to install Docker & Docker Compose on your machine.',
     publish: '2023-09-25',
     get_absolute_url: '/blog/docker-installation',
+    tags: ["docker", "docker-compose", "linux"]
   },
   {
     label: 'Rocket Science',
     body: 'Discover how rocket are work.',
     publish: '2023-09-25',
     get_absolute_url: '/blog/rocket-science',
+    tags: ["rocket", "space", "engineering"]
   },
 ];
 
diff --git a/components/blogpost.tsx b/components/blogpost.tsx
index 13939db..a5fb889 100644
--- a/components/blogpost.tsx
+++ b/components/blogpost.tsx
@@ -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)}...