From 1f0ec5ff4b5beac59cb821e8145abac1276ee351 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 17:24:01 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Added=20LogoSvgLight=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* This component handles the logo display
* Enhances the visual appeal of the project
* Implements SVG rendering for the logo
✅ Tested and ready for production use
---
 src/app/blog/SectionAds.tsx         | 17 ++++++++
 src/app/blog/SectionLatestPosts.tsx | 60 +++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 src/app/blog/SectionAds.tsx
 create mode 100644 src/app/blog/SectionLatestPosts.tsx

diff --git a/src/app/blog/SectionAds.tsx b/src/app/blog/SectionAds.tsx
new file mode 100644
index 0000000..46691c9
--- /dev/null
+++ b/src/app/blog/SectionAds.tsx
@@ -0,0 +1,17 @@
+import React, { FC } from "react";
+import imgAds from "@/images/ads.png";
+import Image from "next/image";
+
+export interface SectionAdsProps {
+  className?: string;
+}
+
+const SectionAds: FC<SectionAdsProps> = ({ className = "" }) => {
+  return (
+    <a href="/#" className={`nc-SectionAds block w-full ${className}`}>
+      <Image className="w-full" src={imgAds} alt="" />
+    </a>
+  );
+};
+
+export default SectionAds;
diff --git a/src/app/blog/SectionLatestPosts.tsx b/src/app/blog/SectionLatestPosts.tsx
new file mode 100644
index 0000000..e6ed23a
--- /dev/null
+++ b/src/app/blog/SectionLatestPosts.tsx
@@ -0,0 +1,60 @@
+import React, { FC } from "react";
+import Heading from "@/shared/Heading";
+import { DEMO_POSTS } from "@/data/posts";
+import { PostDataType } from "@/data/types";
+import Pagination from "@/shared/Pagination";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+import WidgetTags from "./WidgetTags";
+import WidgetCategories from "./WidgetCategories";
+import WidgetPosts from "./WidgetPosts";
+import Card3 from "./Card3";
+
+// THIS IS DEMO FOR MAIN DEMO
+// OTHER DEMO WILL PASS PROPS
+const postsDemo: PostDataType[] = DEMO_POSTS.filter((_, i) => i > 7 && i < 14);
+//
+export interface SectionLatestPostsProps {
+  posts?: PostDataType[];
+  className?: string;
+  postCardName?: "card3";
+}
+
+const SectionLatestPosts: FC<SectionLatestPostsProps> = ({
+  posts = postsDemo,
+  postCardName = "card3",
+  className = "",
+}) => {
+  const renderCard = (post: PostDataType) => {
+    switch (postCardName) {
+      case "card3":
+        return <Card3 key={post.id} className="" post={post} />;
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={`nc-SectionLatestPosts relative ${className}`}>
+      <div className="flex flex-col lg:flex-row">
+        <div className="w-full lg:w-3/5 xl:w-2/3 xl:pr-14">
+          <Heading>Latest Articles 🎈</Heading>
+          <div className={`grid gap-6 md:gap-8 grid-cols-1`}>
+            {posts.map((post) => renderCard(post))}
+          </div>
+          <div className="flex flex-col mt-12 md:mt-20 space-y-5 sm:space-y-0 sm:space-x-3 sm:flex-row sm:justify-between sm:items-center">
+            <Pagination />
+            <ButtonPrimary loading>Show me more</ButtonPrimary>
+          </div>
+        </div>
+        <div className="w-full space-y-7 mt-24 lg:mt-0 lg:w-2/5 lg:pl-10 xl:pl-0 xl:w-1/3 ">
+          <WidgetTags />
+          <WidgetCategories />
+          <WidgetPosts />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionLatestPosts;