From c1e7acaaed3ea1b497d27147287d31c9de99d70e Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:34:59 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Implemented=20SectionGr?=
 =?UTF-8?q?idFeaturePlaces=20component=20=F0=9F=93=A6=20Added=20a=20new=20?=
 =?UTF-8?q?React=20component=20for=20displaying=20featured=20places=20to?=
 =?UTF-8?q?=20stay.=20=F0=9F=94=A7=20Configured=20the=20component=20with?=
 =?UTF-8?q?=20various=20props=20and=20card=20types.=20=F0=9F=93=84=20Updat?=
 =?UTF-8?q?ed=20imports=20and=20constants=20for=20better=20organization.?=
 =?UTF-8?q?=20=F0=9F=9A=80=20Ready=20to=20showcase=20featured=20stay=20lis?=
 =?UTF-8?q?tings!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/SectionGridFeaturePlaces.tsx b/src/components/SectionGridFeaturePlaces.tsx
new file mode 100644
index 0000000..6ad943e
--- /dev/null
+++ b/src/components/SectionGridFeaturePlaces.tsx
@@ -0,0 +1,69 @@
+import React, { FC, ReactNode } from "react";
+import { DEMO_STAY_LISTINGS } from "@/data/listings";
+import { StayDataType } from "@/data/types";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+import HeaderFilter from "./HeaderFilter";
+import StayCard from "./StayCard";
+import StayCard2 from "./StayCard2";
+
+// OTHER DEMO WILL PASS PROPS
+const DEMO_DATA: StayDataType[] = DEMO_STAY_LISTINGS.filter((_, i) => i < 8);
+
+//
+export interface SectionGridFeaturePlacesProps {
+  stayListings?: StayDataType[];
+  gridClass?: string;
+  heading?: ReactNode;
+  subHeading?: ReactNode;
+  headingIsCenter?: boolean;
+  tabs?: string[];
+  cardType?: "card1" | "card2";
+}
+
+const SectionGridFeaturePlaces: FC<SectionGridFeaturePlacesProps> = ({
+  stayListings = DEMO_DATA,
+  gridClass = "",
+  heading = "Featured places to stay",
+  subHeading = "Popular places to stay that Chisfis recommends for you",
+  headingIsCenter,
+  tabs = ["New York", "Tokyo", "Paris", "London"],
+  cardType = "card2",
+}) => {
+  const renderCard = (stay: StayDataType) => {
+    let CardName = StayCard;
+    switch (cardType) {
+      case "card1":
+        CardName = StayCard;
+        break;
+      case "card2":
+        CardName = StayCard2;
+        break;
+
+      default:
+        CardName = StayCard;
+    }
+
+    return <CardName key={stay.id} data={stay} />;
+  };
+
+  return (
+    <div className="nc-SectionGridFeaturePlaces relative">
+      <HeaderFilter
+        tabActive={"New York"}
+        subHeading={subHeading}
+        tabs={tabs}
+        heading={heading}
+      />
+      <div
+        className={`grid gap-6 md:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 ${gridClass}`}
+      >
+        {stayListings.map((stay) => renderCard(stay))}
+      </div>
+      <div className="flex mt-16 justify-center items-center">
+        <ButtonPrimary loading>Show me more</ButtonPrimary>
+      </div>
+    </div>
+  );
+};
+
+export default SectionGridFeaturePlaces;