refactor: make SidePeek more reusable and composable

components/ContentType/HotelPage/HotelPage.tsx

@@ -6,6 +6,8 @@ import AmenitiesList from "./AmenitiesList"
 import IntroSection from "./IntroSection"
 import { Rooms } from "./Rooms"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import SidePeekContent from "@/components/TempDesignSystem/SidePeek/Content"
+import SidePeekContainer from "./SidePeekContainer"
 
 import styles from "./hotelPage.module.css"
 
@@ -38,6 +40,7 @@ export default async function HotelPage({ lang }: LangParams) {
         <AmenitiesList detailedFacilities={attributes.detailedFacilities} />
       </div>
       <Rooms rooms={roomCategories} />
+
       <Link href={"?sidepeek=restaurantbar"} scroll={false}>
         Restaurant and bar
       </Link>
@@ -47,6 +50,25 @@ export default async function HotelPage({ lang }: LangParams) {
       <Link href={"?sidepeek=meetings"} scroll={false}>
         Meetings
       </Link>
+      <SidePeekContainer>
+        <SidePeekContent contentKey={"restaurantbar"} title={"Food and drinks"}>
+          Food
+        </SidePeekContent>
+        <SidePeekContent contentKey={"gym"} title={"Gym and Wellness"}>
+          <ul>
+            <li>Some</li>
+            <li>JSX</li>
+            <li>Conent</li>
+            <li>here</li>
+          </ul>
+        </SidePeekContent>
+        <SidePeekContent
+          contentKey={"meetings"}
+          title={"Meetings and conferences"}
+        >
+          Meetings
+        </SidePeekContent>
+      </SidePeekContainer>
     </main>
   )
 }

components/ContentType/HotelPage/SidePeekContainer.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import React, { Children, cloneElement, useEffect, useState } from "react"
+
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+
+export default function SidePeekContainer({
+  children,
+}: React.PropsWithChildren) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [activeSidePeek, setActiveSidePeek] = useState<string | null>(() => {
+    const sidePeekParam = searchParams.get("sidepeek")
+
+    return sidePeekParam || null
+  })
+
+  useEffect(() => {
+    const sidePeekParam = searchParams.get("sidepeek")
+    if (sidePeekParam !== activeSidePeek) {
+      setActiveSidePeek(sidePeekParam)
+    }
+  }, [searchParams, activeSidePeek])
+
+  function handleClose(isOpen: boolean) {
+    if (!isOpen) {
+      setActiveSidePeek(null)
+
+      const nextSearchParams = new URLSearchParams(searchParams.toString())
+      nextSearchParams.delete("sidepeek")
+
+      router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
+    }
+  }
+  const childrenWithIsActive = Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child
+    }
+    return cloneElement(child as React.ReactElement, {
+      isActive: child.props.contentKey === activeSidePeek,
+    })
+  })
+
+  return (
+    <SidePeek activeContent={activeSidePeek} onClose={handleClose}>
+      {childrenWithIsActive}
+    </SidePeek>
+  )
+}