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

Update widgetPostsDemo to filter posts between index 3 and 6.
Add viewAll prop to WidgetHeading1 component.
---
 src/app/blog/WidgetPosts.tsx | 39 ++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/app/blog/WidgetPosts.tsx

diff --git a/src/app/blog/WidgetPosts.tsx b/src/app/blog/WidgetPosts.tsx
new file mode 100644
index 0000000..c6d1a7d
--- /dev/null
+++ b/src/app/blog/WidgetPosts.tsx
@@ -0,0 +1,39 @@
+import { DEMO_POSTS } from "@/data/posts";
+import { PostDataType } from "@/data/types";
+import React, { FC } from "react";
+import Card3Small from "./Card3Small";
+import WidgetHeading1 from "./WidgetHeading1";
+
+export interface WidgetPostsProps {
+  className?: string;
+  posts?: PostDataType[];
+}
+
+const widgetPostsDemo: PostDataType[] = DEMO_POSTS.filter(
+  (_, i) => i > 2 && i < 7
+);
+
+const WidgetPosts: FC<WidgetPostsProps> = ({
+  className = "bg-neutral-100 dark:bg-neutral-800",
+  posts = widgetPostsDemo,
+}) => {
+  return (
+    <div className={`nc-WidgetPosts rounded-3xl overflow-hidden ${className}`}>
+      <WidgetHeading1
+        title="🎯 Popular Posts"
+        viewAll={{ label: "View all", href: "/#" }}
+      />
+      <div className="flex flex-col divide-y divide-neutral-200 dark:divide-neutral-700">
+        {posts.map((post) => (
+          <Card3Small
+            className="p-4 xl:px-5 xl:py-6 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+            key={post.id}
+            post={post}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default WidgetPosts;