From 2008aff05edbe5143c271100c389d96f43f77e3d Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 17:20:28 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20WidgetCategories=20componen?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* This component renders a list of categories
* The categories are displayed in a card format
* The component has a view all button that links to a page with all the categories

✅ Ready for review
---
 src/app/blog/WidgetCategories.tsx | 42 +++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/app/blog/WidgetCategories.tsx

diff --git a/src/app/blog/WidgetCategories.tsx b/src/app/blog/WidgetCategories.tsx
new file mode 100644
index 0000000..3a14e00
--- /dev/null
+++ b/src/app/blog/WidgetCategories.tsx
@@ -0,0 +1,42 @@
+import CardCategory1 from "@/components/CardCategory1";
+import { DEMO_CATEGORIES } from "@/data/taxonomies";
+import { TaxonomyType } from "@/data/types";
+import React, { FC } from "react";
+import WidgetHeading1 from "./WidgetHeading1";
+
+export interface WidgetCategoriesProps {
+  className?: string;
+  categories?: TaxonomyType[];
+}
+
+const categoriesDemo: TaxonomyType[] = DEMO_CATEGORIES.filter((_, i) => i < 5);
+
+const WidgetCategories: FC<WidgetCategoriesProps> = ({
+  className = "bg-neutral-100 dark:bg-neutral-800",
+  categories = categoriesDemo,
+}) => {
+  return (
+    <div
+      className={`nc-WidgetCategories rounded-3xl overflow-hidden ${className}`}
+    >
+      <WidgetHeading1
+        title="✨ Trending topic"
+        viewAll={{ label: "View all", href: "/#" }}
+      />
+      <div className="flow-root">
+        <div className="flex flex-col divide-y divide-neutral-200 dark:divide-neutral-700">
+          {categories.map((category) => (
+            <CardCategory1
+              className="p-4 xl:p-5 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+              key={category.id}
+              taxonomy={category}
+              size="normal"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WidgetCategories;