From 9b1355050a1a46fd413322c0371326a5d284cbb4 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:19:25 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Added=20a=20new=20React=20compon?=
 =?UTF-8?q?ent:=20CardCategory1=20=F0=9F=9B=A0=EF=B8=8F=20Refactored=20and?=
 =?UTF-8?q?=20optimized=20the=20component=20code=20=E2=9C=A8=20Implemented?=
 =?UTF-8?q?=20dynamic=20sizing=20based=20on=20props=20=F0=9F=94=97=20Added?=
 =?UTF-8?q?=20link=20functionality=20using=20Next.js=20Link=20=F0=9F=96=BC?=
 =?UTF-8?q?=EF=B8=8F=20Integrated=20Next.js=20Image=20for=20optimized=20im?=
 =?UTF-8?q?age=20rendering=20=F0=9F=8E=A8=20Improved=20styling=20and=20des?=
 =?UTF-8?q?ign=20of=20the=20component=20=F0=9F=92=A1=20Added=20comments=20?=
 =?UTF-8?q?and=20documentation=20for=20better=20clarity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CardCategory1.tsx | 52 ++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/CardCategory1.tsx

diff --git a/src/components/CardCategory1.tsx b/src/components/CardCategory1.tsx
new file mode 100644
index 0000000..6217b23
--- /dev/null
+++ b/src/components/CardCategory1.tsx
@@ -0,0 +1,52 @@
+import React, { FC } from "react";
+import { TaxonomyType } from "@/data/types";
+import Link from "next/link";
+import Image from "next/image";
+
+export interface CardCategory1Props {
+  className?: string;
+  taxonomy: TaxonomyType;
+  size?: "large" | "normal";
+}
+
+const CardCategory1: FC<CardCategory1Props> = ({
+  className = "",
+  size = "normal",
+  taxonomy,
+}) => {
+  const { count, name, href = "/", thumbnail } = taxonomy;
+  return (
+    <Link
+      href={href}
+      className={`nc-CardCategory1 flex items-center ${className}`}
+      data-nc-id="CardCategory1"
+    >
+      <div
+        className={`flex-shrink-0 relative ${
+          size === "large" ? "w-20 h-20" : "w-12 h-12"
+        } rounded-lg mr-4 overflow-hidden`}
+      >
+        <Image alt="" fill src={thumbnail || ""} />
+      </div>
+
+      <div>
+        <h2
+          className={`${
+            size === "large" ? "text-lg" : "text-base"
+          } nc-card-title text-neutral-900 dark:text-neutral-100 font-semibold`}
+        >
+          {name}
+        </h2>
+        <span
+          className={`${
+            size === "large" ? "text-sm" : "text-xs"
+          } block mt-[2px] text-neutral-500 dark:text-neutral-400`}
+        >
+          {count} Articles
+        </span>
+      </div>
+    </Link>
+  );
+};
+
+export default CardCategory1;