From e44cd43698d62bd86b15da52429562f9fa5c3d0b Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:17:52 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Added=20CardCategory4=20componen?=
 =?UTF-8?q?t=20=E2=9C=A8=20Improved=20component=20structure=20=F0=9F=8E=A8?=
 =?UTF-8?q?=20Updated=20styling=20for=20better=20UI=20=F0=9F=90=9B=20Fixed?=
 =?UTF-8?q?=20minor=20issues=20=F0=9F=93=A6=20Added=20missing=20dependenci?=
 =?UTF-8?q?es=20=F0=9F=8C=9F=20Ready=20for=20further=20development?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/CardCategory4.tsx b/src/components/CardCategory4.tsx
new file mode 100644
index 0000000..e5f0d4e
--- /dev/null
+++ b/src/components/CardCategory4.tsx
@@ -0,0 +1,55 @@
+import React, { FC } from "react";
+import { TaxonomyType } from "@/data/types";
+import convertNumbThousand from "@/utils/convertNumbThousand";
+import Link from "next/link";
+import Image from "next/image";
+
+export interface CardCategory4Props {
+  className?: string;
+  taxonomy: TaxonomyType;
+}
+
+const CardCategory4: FC<CardCategory4Props> = ({
+  className = "",
+  taxonomy,
+}) => {
+  const { count, name, href = "/", thumbnail, listingType } = taxonomy;
+  return (
+    <Link
+      href={href}
+      className={`nc-CardCategory4 flex flex-col ${className}`}
+      data-nc-id="CardCategory4"
+    >
+      <div
+        className={`flex-shrink-0 relative w-full aspect-w-5 aspect-h-5 sm:aspect-h-6 h-0 rounded-2xl overflow-hidden group`}
+      >
+        <Image
+          src={thumbnail || ""}
+          className="object-cover w-full h-full rounded-2xl"
+          fill
+          alt="archive"
+          sizes="(max-width: 400px) 100vw, 400px"
+        />
+        <span className="opacity-0 group-hover:opacity-100 absolute inset-0 bg-black bg-opacity-10 transition-opacity"></span>
+      </div>
+      <div className="mt-4 px-2 truncate text-center">
+        <h2
+          className={`text-base sm:text-lg text-neutral-900 dark:text-neutral-100 font-medium truncate`}
+        >
+          {name}
+        </h2>
+        <span
+          className={`block mt-2 text-sm text-neutral-6000 dark:text-neutral-400`}
+        >
+          {convertNumbThousand(count || 0)}
+          {` `}
+          {(!listingType || listingType === "stay") && "properties"}
+          {listingType === "car" && "cars"}
+          {listingType === "experiences" && "experiences"}
+        </span>
+      </div>
+    </Link>
+  );
+};
+
+export default CardCategory4;