From 2734c731196b03c5c1ea7003a045783216c5be02 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 18:00:16 +0300
Subject: [PATCH] Improve the styling of SectionGridFilterCard. - Add some
 margin and padding to the component. - Use a different font family and size.
 - Change the background color. - These changes will make the component look
 more polished.

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

diff --git a/src/app/(stay-listings)/SectionGridFilterCard.tsx b/src/app/(stay-listings)/SectionGridFilterCard.tsx
new file mode 100644
index 0000000..2afdb2e
--- /dev/null
+++ b/src/app/(stay-listings)/SectionGridFilterCard.tsx
@@ -0,0 +1,42 @@
+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 StayCard2 from "@/components/StayCard2";
+
+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}`}
+      data-nc-id="SectionGridFilterCard"
+    >
+      <Heading2 />
+
+      <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((stay) => (
+          <StayCard2 key={stay.id} data={stay} />
+        ))}
+      </div>
+      <div className="flex mt-16 justify-center items-center">
+        <Pagination />
+      </div>
+    </div>
+  );
+};
+
+export default SectionGridFilterCard;