From e3afd8e92b47fe8a479d0687c62fc59436cf9c8d Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Thu, 14 Sep 2023 17:04:59 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20component=20?=
 =?UTF-8?q?structure=20for=20better=20organization.=20=F0=9F=93=A6=20Add?=
 =?UTF-8?q?=20missing=20comments=20for=20code=20clarity.=20=E2=9C=85=20Tes?=
 =?UTF-8?q?t=20and=20validate=20component=20functionality.=20=F0=9F=8E=A8?=
 =?UTF-8?q?=20Update=20styling=20for=20improved=20UI.=20=F0=9F=9A=A7=20Wor?=
 =?UTF-8?q?k=20in=20progress:=20Implement=20new=20features.=20=F0=9F=93=9D?=
 =?UTF-8?q?=20Update=20documentation=20and=20comments.=20=F0=9F=90=9B=20Fi?=
 =?UTF-8?q?x=20minor=20bugs=20in=20the=20component.=20=E2=9A=99=EF=B8=8F?=
 =?UTF-8?q?=20Configure=20environment=20settings.=20=F0=9F=94=84=20Merge?=
 =?UTF-8?q?=20feature=20branch=20into=20main.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(car-listings)/SectionGridFilterCard.tsx  | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/app/(car-listings)/SectionGridFilterCard.tsx

diff --git a/src/app/(car-listings)/SectionGridFilterCard.tsx b/src/app/(car-listings)/SectionGridFilterCard.tsx
new file mode 100644
index 0000000..60aaf27
--- /dev/null
+++ b/src/app/(car-listings)/SectionGridFilterCard.tsx
@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { DEMO_CAR_LISTINGS } from "@/data/listings";
+import { CarDataType } from "@/data/types";
+import Pagination from "@/shared/Pagination";
+import TabFilters from "./TabFilters";
+import Heading2 from "@/shared/Heading2";
+import CarCard from "@/components/CarCard";
+
+export interface SectionGridFilterCardProps {
+  className?: string;
+  data?: CarDataType[];
+}
+
+const DEMO_DATA: CarDataType[] = DEMO_CAR_LISTINGS.filter((_, i) => i < 12);
+
+const SectionGridFilterCard: FC<SectionGridFilterCardProps> = ({
+  className = "",
+  data = DEMO_DATA,
+}) => {
+  return (
+    <div className={`nc-SectionGridFilterCard ${className}`}>
+      <Heading2
+        heading="Cars in Tokyo"
+        subHeading={
+          <span className="block text-neutral-500 dark:text-neutral-400 mt-3">
+            233 cars
+            <span className="mx-2">·</span>
+            Aug 12 - 18
+          </span>
+        }
+      />
+
+      <div className="mb-8 lg:mb-11">
+        <TabFilters />
+      </div>
+      <div className="grid grid-cols-1 gap-6 md:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {data.map((car) => (
+          <CarCard key={car.id} data={car} />
+        ))}
+      </div>
+      <div className="flex mt-16 justify-center items-center">
+        <Pagination />
+      </div>
+    </div>
+  );
+};
+
+export default SectionGridFilterCard;