From 4c2cf1822122d58ad0a6403c7dd883245ae08553 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:15:17 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20a=20new=20feature=20to?=
 =?UTF-8?q?=20CardCategoryBox1=20component=20=F0=9F=90=9E=20Fixed=20a=20bu?=
 =?UTF-8?q?g=20in=20CardCategoryBox1=20component=20=F0=9F=93=9A=20Updated?=
 =?UTF-8?q?=20CardCategoryBox1=20component=20documentation=20=E2=9C=A8=20I?=
 =?UTF-8?q?mproved=20CardCategoryBox1=20component=20performance=20?=
 =?UTF-8?q?=F0=9F=94=A7=20Refactored=20CardCategoryBox1=20component=20for?=
 =?UTF-8?q?=20better=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/CardCategoryBox1.tsx b/src/components/CardCategoryBox1.tsx
new file mode 100644
index 0000000..d07e538
--- /dev/null
+++ b/src/components/CardCategoryBox1.tsx
@@ -0,0 +1,51 @@
+import React, { FC } from "react";
+import { TaxonomyType } from "@/data/types";
+import Badge from "@/shared/Badge";
+import convertNumbThousand from "@/utils/convertNumbThousand";
+import Link from "next/link";
+import Image from "next/image";
+
+export interface CardCategoryBox1Props {
+  className?: string;
+  taxonomy: TaxonomyType;
+}
+
+const CardCategoryBox1: FC<CardCategoryBox1Props> = ({
+  className = "",
+  taxonomy,
+}) => {
+  const { count, name, thumbnail, href = "/" } = taxonomy;
+  return (
+    <Link
+      href={href}
+      className={`nc-CardCategoryBox1 relative flex items-center p-3 sm:p-6 [ nc-box-has-hover ] [ nc-dark-box-bg-has-hover ]  ${className}`}
+    >
+      <Badge
+        className="absolute right-2 top-2"
+        color="gray"
+        name={convertNumbThousand(count)}
+      />
+
+      <div className="relative flex-shrink-0 w-24 h-24 rounded-full overflow-hidden">
+        <Image
+          src={thumbnail || ""}
+          fill
+          alt=""
+          sizes="(max-width: 400px) 100vw, 400px"
+        />
+      </div>
+      <div className="ml-4 flex-grow overflow-hidden">
+        <h2 className="text-base font-medium">
+          <span className="line-clamp-1">{name}</span>
+        </h2>
+        <span
+          className={`block mt-2 text-sm text-neutral-500 dark:text-neutral-400`}
+        >
+          19 minutes drive
+        </span>
+      </div>
+    </Link>
+  );
+};
+
+export default CardCategoryBox1;