From 31948c5703bdfcfc0fd599a2de8e41c539f6854c Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 19:41:59 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20a=20new=20component=20to?=
 =?UTF-8?q?=20the=20project.=20=F0=9F=9A=A7=20Work=20in=20progress:=20Refa?=
 =?UTF-8?q?ctoring=20code=20for=20better=20readability.=20=F0=9F=90=9B=20F?=
 =?UTF-8?q?ixed=20a=20bug=20in=20the=20DetailtLayout=20component.=20?=
 =?UTF-8?q?=F0=9F=93=A6=20Updated=20dependencies=20to=20the=20latest=20ver?=
 =?UTF-8?q?sions.=20=F0=9F=8E=A8=20Improved=20code=20formatting=20and=20st?=
 =?UTF-8?q?yle.=20=F0=9F=93=9A=20Updated=20documentation=20for=20DetailtLa?=
 =?UTF-8?q?yout.=20=F0=9F=8C=90=20Added=20localization=20support=20to=20th?=
 =?UTF-8?q?e=20project.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(listing-detail)/layout.tsx | 72 +++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/app/(listing-detail)/layout.tsx

diff --git a/src/app/(listing-detail)/layout.tsx b/src/app/(listing-detail)/layout.tsx
new file mode 100644
index 0000000..dcf9c48
--- /dev/null
+++ b/src/app/(listing-detail)/layout.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import BackgroundSection from "@/components/BackgroundSection";
+import ListingImageGallery from "@/components/listing-image-gallery/ListingImageGallery";
+import SectionSliderNewCategories from "@/components/SectionSliderNewCategories";
+import SectionSubscribe2 from "@/components/SectionSubscribe2";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import React, { ReactNode } from "react";
+import MobileFooterSticky from "./(components)/MobileFooterSticky";
+import { imageGallery as listingStayImageGallery } from "./listing-stay-detail/constant";
+import { imageGallery as listingCarImageGallery } from "./listing-car-detail/constant";
+import { imageGallery as listingExperienceImageGallery } from "./listing-experiences-detail/constant";
+import { Route } from "next";
+
+const DetailtLayout = ({ children }: { children: ReactNode }) => {
+  const router = useRouter();
+  const thisPathname = usePathname();
+  const searchParams = useSearchParams();
+  const modal = searchParams?.get("modal");
+
+  const handleCloseModalImageGallery = () => {
+    let params = new URLSearchParams(document.location.search);
+    params.delete("modal");
+    router.push(`${thisPathname}/?${params.toString()}` as Route);
+  };
+
+  const getImageGalleryListing = () => {
+    if (thisPathname?.includes("/listing-stay-detail")) {
+      return listingStayImageGallery;
+    }
+    if (thisPathname?.includes("/listing-car-detail")) {
+      return listingCarImageGallery;
+    }
+    if (thisPathname?.includes("/listing-experiences-detail")) {
+      return listingExperienceImageGallery;
+    }
+
+    return [];
+  };
+
+  return (
+    <div className="ListingDetailPage">
+      <ListingImageGallery
+        isShowModal={modal === "PHOTO_TOUR_SCROLLABLE"}
+        onClose={handleCloseModalImageGallery}
+        images={getImageGalleryListing()}
+      />
+
+      <div className="container ListingDetailPage__content">{children}</div>
+
+      {/* OTHER SECTION */}
+      <div className="container py-24 lg:py-32">
+        <div className="relative py-16">
+          <BackgroundSection />
+          <SectionSliderNewCategories
+            heading="Explore by types of stays"
+            subHeading="Explore houses based on 10 types of stays"
+            categoryCardType="card5"
+            itemPerRow={5}
+            sliderStyle="style2"
+          />
+        </div>
+        <SectionSubscribe2 className="pt-24 lg:pt-32" />
+      </div>
+
+      {/* STICKY FOOTER MOBILE */}
+      <MobileFooterSticky />
+    </div>
+  );
+};
+
+export default DetailtLayout;