From a7a4e102c73b274d16b09bd3581b60c91ff94616 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 17:21:57 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Add=20Card13=20component=20to=20?=
 =?UTF-8?q?SectionMagazine5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Added Card13 component to the SectionMagazine5 component
* Updated the code to render Card13 component if the posts array has more than 2 items

✅ Ready to be reviewed
---
 src/app/blog/SectionMagazine5.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/app/blog/SectionMagazine5.tsx

diff --git a/src/app/blog/SectionMagazine5.tsx b/src/app/blog/SectionMagazine5.tsx
new file mode 100644
index 0000000..5c0cf25
--- /dev/null
+++ b/src/app/blog/SectionMagazine5.tsx
@@ -0,0 +1,27 @@
+import React, { FC } from "react";
+import { PostDataType } from "@/data/types";
+import Card12 from "./Card12";
+import Card13 from "./Card13";
+
+export interface SectionMagazine5Props {
+  posts: PostDataType[];
+}
+
+const SectionMagazine5: FC<SectionMagazine5Props> = ({ posts }) => {
+  return (
+    <div className="nc-SectionMagazine5">
+      <div className="grid lg:grid-cols-2 gap-6 md:gap-8">
+        {posts[0] && <Card12 post={posts[0]} />}
+        <div className="grid gap-6 md:gap-8">
+          {posts
+            .filter((_, i) => i < 4 && i > 0)
+            .map((item, index) => (
+              <Card13 key={index} post={item} />
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionMagazine5;