From e37b451ba5bc8d35c162b951d5f418acbc85b5b6 Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Sat, 1 Mar 2025 07:35:06 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20feat(blog):=20Implement=20blog?=
 =?UTF-8?q?=20area=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit introduces a new `BlogArea` component that displays a list of blog posts. The changes include:

- Added a new `BlogArea` component in `components/blogpost.tsx` that renders a list of blog posts with their title, description, and a link to the full post.
- Integrated the `BlogArea` component into the `Home` page in `app/page.tsx`.
- Added mock data for the blog posts in `app/page.tsx` to demonstrate the functionality.
---
 app/page.tsx            | 19 ++++++++++++-
 components/blogpost.tsx | 61 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 components/blogpost.tsx

diff --git a/app/page.tsx b/app/page.tsx
index a2c1699..a2ae316 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,21 @@
 import Image from "next/image";
+import BlogArea from "../components/blogpost";
+
+// Mock data for blog posts
+const blogposts = [
+  {
+    label: 'Retro Futurism: A Journey Through Time',
+    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',
+  },
+  {
+    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',
+  },
+];
 
 export default function Home() {
   return (
@@ -21,7 +38,7 @@ export default function Home() {
       </header>
 
       <main>
-        {/* Blogpost Components Here */}
+        <BlogArea blogposts={blogposts} />
       </main>
 
       <footer className="border-t border-white pt-4 flex flex-row justify-around text-2xl">
diff --git a/components/blogpost.tsx b/components/blogpost.tsx
new file mode 100644
index 0000000..b129d60
--- /dev/null
+++ b/components/blogpost.tsx
@@ -0,0 +1,61 @@
+import Link from 'next/link';
+
+interface BlogPost {
+  label: string;
+  body: string;
+  publish: string;
+  get_absolute_url: string;
+}
+
+interface BlogAreaProps {
+  blogposts: BlogPost[];
+}
+
+export default function BlogArea({ blogposts }: BlogAreaProps) {
+  return (
+    <div className="blog-area py-16 border-t border-white w-full">
+      <div className="blogposts">
+        {blogposts.map((blogpost, index) => (
+          <div key={index} className="blogpost flex flex-row overflow-hidden mb-8">
+            <div className="left mr-5">
+              <div className="blogpost-image">
+                <img
+                  src="/images/retrofuturism.webp"
+                  alt="Retrospective Science Image"
+                  className="w-96 h-96 rounded-lg border border-white"
+                />
+              </div>
+            </div>
+            <div className="right flex flex-col">
+              <div className="blogpost-label text-2xl mb-4">
+                <h2>
+                  <Link href={blogpost.get_absolute_url} className="text-white hover:underline">
+                    {blogpost.label}
+                  </Link>
+                </h2>
+              </div>
+              <ul className="blogpost-tags flex flex-row space-x-4 mb-4">
+                <li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Games</li>
+                <li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Science</li>
+              </ul>
+              <div className="blogpost-description text-base mb-4">
+                {blogpost.body.slice(0, 512)}...
+              </div>
+              <div className="blogpost-other flex flex-row justify-between items-center">
+                <div className="text-base">
+                  <p>Posted: {blogpost.publish}</p>
+                </div>
+                <div className="text-2xl">
+                  <Link href={blogpost.get_absolute_url} className="text-white hover:underline">
+                    Read
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* Include Pagination Component Here */}
+    </div>
+  );
+}
\ No newline at end of file