From 38241a0911471bdebcb782fbcad85a615817eb24 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 17:11:12 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=83=20Update=20SectionGridFilterCard?=
 =?UTF-8?q?=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add a className prop to allow custom CSS classes to be applied to the component
* Fix a bug where the TabFilters component was not being rendered correctly
---
 .../SectionGridFilterCard.tsx                 | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 src/app/(flight-listings)/SectionGridFilterCard.tsx

diff --git a/src/app/(flight-listings)/SectionGridFilterCard.tsx b/src/app/(flight-listings)/SectionGridFilterCard.tsx
new file mode 100644
index 0000000..b7fdb57
--- /dev/null
+++ b/src/app/(flight-listings)/SectionGridFilterCard.tsx
@@ -0,0 +1,105 @@
+import React, { FC } from "react";
+import TabFilters from "./TabFilters";
+import Heading2 from "@/shared/Heading2";
+import FlightCard, { FlightCardProps } from "@/components/FlightCard";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+
+export interface SectionGridFilterCardProps {
+  className?: string;
+}
+
+const DEMO_DATA: FlightCardProps["data"][] = [
+  {
+    id: "1",
+    price: "$4,100",
+    airlines: {
+      logo: "https://www.gstatic.com/flights/airline_logos/70px/KE.png",
+      name: "Korean Air",
+    },
+  },
+  {
+    id: "2",
+    price: "$3,380",
+    airlines: {
+      logo: "https://www.gstatic.com/flights/airline_logos/70px/SQ.png",
+      name: "Singapore Airlines",
+    },
+  },
+  {
+    id: "3",
+    price: "$2,380",
+    airlines: {
+      logo: "https://www.gstatic.com/flights/airline_logos/70px/multi.png",
+      name: "Philippine Airlines",
+    },
+  },
+  {
+    id: "1",
+    price: "$4,100",
+    airlines: {
+      logo: "https://www.gstatic.com/flights/airline_logos/70px/KE.png",
+      name: "Korean Air",
+    },
+  },
+  {
+    id: "2",
+    price: "$3,380",
+    airlines: {
+      logo: "https://www.gstatic.com/flights/airline_logos/70px/SQ.png",
+      name: "Singapore Airlines",
+    },
+  },
+  {
+    id: "1",
+    price: "$4,100",
+    airlines: {
+      logo: "https://www.gstatic.com/flights/airline_logos/70px/KE.png",
+      name: "Korean Air",
+    },
+  },
+  {
+    id: "2",
+    price: "$3,380",
+    airlines: {
+      logo: "https://www.gstatic.com/flights/airline_logos/70px/SQ.png",
+      name: "Singapore Airlines",
+    },
+  },
+];
+
+const SectionGridFilterCard: FC<SectionGridFilterCardProps> = ({
+  className = "",
+}) => {
+  return (
+    <div
+      className={`nc-SectionGridFilterCard ${className}`}
+      data-nc-id="SectionGridFilterCard"
+    >
+      <Heading2
+        heading="Singapore - Tokyo"
+        subHeading={
+          <span className="block text-neutral-500 dark:text-neutral-400 mt-3">
+            22 flights
+            <span className="mx-2">·</span>
+            round trip
+            <span className="mx-2">·</span>2 Guests
+          </span>
+        }
+      />
+      <div className="mb-8 lg:mb-11">
+        <TabFilters />
+      </div>
+      <div className="lg:p-10 lg:bg-neutral-50 lg:dark:bg-black/20 grid grid-cols-1 gap-6  rounded-3xl">
+        {DEMO_DATA.map((item, index) => (
+          <FlightCard key={index} data={item} />
+        ))}
+
+        <div className="flex mt-12 justify-center items-center">
+          <ButtonPrimary loading>Show more</ButtonPrimary>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionGridFilterCard;