From 707a31f37e4fad3896f7fab8416473589a5e7a7c Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 19:37:37 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20SectionGridFilterC?=
 =?UTF-8?q?ard=20component.=20=F0=9F=92=A1=20Added=20Pagination=20function?=
 =?UTF-8?q?ality.=20=F0=9F=8E=89=20Enhanced=20UI=20with=20TabFilters.=20?=
 =?UTF-8?q?=F0=9F=93=A6=20Integrated=20DEMO=5FSTAY=5FLISTINGS=20data.=20?=
 =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Updated=20PropertyCardH=20component.=20?=
 =?UTF-8?q?=E2=9C=85=20Tested=20and=20verified=20component=20functionality?=
 =?UTF-8?q?.=20=F0=9F=8C=9F=20Finalized=20SectionGridFilterCard=20componen?=
 =?UTF-8?q?t.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/app/(real-estate-listings)/SectionGridFilterCard.tsx b/src/app/(real-estate-listings)/SectionGridFilterCard.tsx
new file mode 100644
index 0000000..b78945a
--- /dev/null
+++ b/src/app/(real-estate-listings)/SectionGridFilterCard.tsx
@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { DEMO_STAY_LISTINGS } from "@/data/listings";
+import { StayDataType } from "@/data/types";
+import Pagination from "@/shared/Pagination";
+import TabFilters from "./TabFilters";
+import Heading2 from "@/shared/Heading2";
+import PropertyCardH from "@/components/PropertyCardH";
+
+export interface SectionGridFilterCardProps {
+  className?: string;
+  data?: StayDataType[];
+}
+
+const DEMO_DATA: StayDataType[] = DEMO_STAY_LISTINGS.filter((_, i) => i < 8);
+
+const SectionGridFilterCard: FC<SectionGridFilterCardProps> = ({
+  className = "",
+  data = DEMO_DATA,
+}) => {
+  return (
+    <div className={`nc-SectionGridFilterCard ${className}`}>
+      <Heading2
+        heading="Property in Tokyo"
+        subHeading={
+          <span className="block text-neutral-500 dark:text-neutral-400 mt-3">
+            233 Property
+            <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 xl:grid-cols-2 ">
+        {data.map((stay) => (
+          <PropertyCardH key={stay.id} data={stay} />
+        ))}
+      </div>
+      <div className="flex mt-16 justify-center items-center">
+        <Pagination />
+      </div>
+    </div>
+  );
+};
+
+export default SectionGridFilterCard;