From f73fc3f7dbf582dfdba9f6c7a5df1dee84dbeb02 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:23:21 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20a=20new=20car=20card=20c?=
 =?UTF-8?q?omponent=20=F0=9F=9A=97=20Implemented=20car=20data=20rendering?=
 =?UTF-8?q?=20=F0=9F=92=A1=20Improved=20code=20structure=20and=20readabili?=
 =?UTF-8?q?ty=20=F0=9F=93=8A=20Added=20ratings=20and=20pricing=20display?=
 =?UTF-8?q?=20=F0=9F=94=84=20Refactored=20image=20gallery=20handling=20?=
 =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Fixed=20minor=20styling=20issues=20?=
 =?UTF-8?q?=F0=9F=93=9D=20Updated=20comments=20and=20documentation=20?=
 =?UTF-8?q?=F0=9F=9A=80=20Ready=20for=20the=20next=20feature=20development?=
 =?UTF-8?q?=20=F0=9F=8E=A8=20Enhanced=20design=20and=20user=20interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/CarCard.tsx b/src/components/CarCard.tsx
new file mode 100644
index 0000000..f7b032f
--- /dev/null
+++ b/src/components/CarCard.tsx
@@ -0,0 +1,107 @@
+import React, { FC } from "react";
+import { DEMO_CAR_LISTINGS } from "@/data/listings";
+import { CarDataType } from "@/data/types";
+import StartRating from "@/components/StartRating";
+import BtnLikeIcon from "@/components/BtnLikeIcon";
+import SaleOffBadge from "@/components/SaleOffBadge";
+import Badge from "@/shared/Badge";
+import Image from "next/image";
+import Link from "next/link";
+
+export interface CarCardProps {
+  className?: string;
+  data?: CarDataType;
+  size?: "default" | "small";
+}
+
+const DEMO_DATA: CarDataType = DEMO_CAR_LISTINGS[0];
+
+const CarCard: FC<CarCardProps> = ({
+  size = "default",
+  className = "",
+  data = DEMO_DATA,
+}) => {
+  const {
+    featuredImage,
+    title,
+    href,
+    like,
+    saleOff,
+    isAds,
+    price,
+    reviewStart,
+    reviewCount,
+    seats,
+    gearshift,
+  } = data;
+
+  const renderSliderGallery = () => {
+    return (
+      <div className="relative w-full rounded-2xl overflow-hidden">
+        <div className="aspect-w-16 aspect-h-9 ">
+          <Image
+            fill
+            src={featuredImage}
+            alt="car"
+            sizes="(max-width: 640px) 100vw, 350px"
+          />
+        </div>
+        <BtnLikeIcon isLiked={like} className="absolute right-3 top-3 z-[1]" />
+        {saleOff && <SaleOffBadge className="absolute left-3 top-3" />}
+      </div>
+    );
+  };
+
+  const renderContent = () => {
+    return (
+      <div className={size === "default" ? "p-5  space-y-4" : "p-3  space-y-2"}>
+        <div className="space-y-2">
+          <div className="flex items-center space-x-2">
+            {isAds && <Badge name="ADS" color="green" />}
+            <h2
+              className={`  capitalize ${
+                size === "default"
+                  ? "text-xl font-semibold"
+                  : "text-base font-medium"
+              }`}
+            >
+              <span className="line-clamp-1">{title}</span>
+            </h2>
+          </div>
+          <div className="flex items-center text-neutral-500 dark:text-neutral-400 text-sm space-x-2">
+            <span className="">{seats} seats</span>
+            <span>-</span>
+            <span className="">{gearshift} </span>
+          </div>
+        </div>
+        <div className="w-14  border-b border-neutral-100 dark:border-neutral-800"></div>
+        <div className="flex justify-between items-center">
+          <span className="text-base font-semibold">
+            {price}
+            {` `}
+            {size === "default" && (
+              <span className="text-sm text-neutral-500 dark:text-neutral-400 font-normal">
+                /day
+              </span>
+            )}
+          </span>
+          <StartRating reviewCount={reviewCount} point={reviewStart} />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className={`nc-CarCard group relative border border-neutral-200 dark:border-neutral-700 rounded-3xl overflow-hidden bg-white dark:bg-neutral-900 ${className}`}
+      data-nc-id="CarCard"
+    >
+      <Link href={href} className="flex flex-col">
+        {renderSliderGallery()}
+        {renderContent()}
+      </Link>
+    </div>
+  );
+};
+
+export default CarCard;