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

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

@@ -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"]
   },
 ];
 

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)}...