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>
+  )
+}

components/TempDesignSystem/SidePeek/Content.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { Children, PropsWithChildren } from "react"
+import { X } from "react-feather"
+
+import Title from "../Text/Title"
+
+import styles from "./sidePeek.module.css"
+
+export default function Content({
+  title,
+  children,
+  contentKey,
+  isActive = false,
+  onClose,
+}: PropsWithChildren<{
+  title?: string
+  contentKey: string
+  isActive?: boolean
+  onClose?: () => void
+}>) {
+  return isActive ? (
+    <aside className={styles.content}>
+      <header className={styles.header}>
+        {title && (
+          <Title level={"h2"} as={"h3"}>
+            {title}
+          </Title>
+        )}
+        <button
+          onClick={() => {
+            onClose && onClose()
+          }}
+          className={styles.closeBtn}
+        >
+          <X height={32} width={32} className={styles.closeIcon} />
+        </button>
+      </header>
+      {children}
+    </aside>
+  ) : null
+}

components/TempDesignSystem/SidePeek/index.tsx

@@ -1,67 +1,37 @@
 "use client"
 
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { ReactNode, useEffect, useState } from "react"
-import { Button, Dialog, DialogTrigger, Modal } from "react-aria-components"
-import { X } from "react-feather"
+import { Children, cloneElement, PropsWithChildren } from "react"
+import { Dialog, DialogTrigger, Modal } from "react-aria-components"
 
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./sidePeek.module.css"
 
 type SidePeekProps = {
-  content: Record<string, { title: string; content: ReactNode }>
+  activeContent: string | null
+  onClose: (isOpen: boolean) => void
 }
-export default function SidePeek({ content }: SidePeekProps) {
-  const [sidePeekContent, setSidePeekContent] = useState<string | null>(null)
-
-  const searchParams = useSearchParams()
-  const activeSidePeek = searchParams.get("sidepeek")
-  const router = useRouter()
-  const pathname = usePathname()
-
-  useEffect(() => {
-    if (activeSidePeek) {
-      setSidePeekContent(activeSidePeek)
-    }
-  }, [activeSidePeek])
-
-  const activeContent = sidePeekContent && content[sidePeekContent]
-
-  function handleClose(isOpen: boolean) {
-    if (!isOpen) {
-      console.log("closing the modal now")
-      setSidePeekContent(null)
-
-      const nextSearchParams = new URLSearchParams(searchParams.toString())
-      nextSearchParams.delete("sidepeek")
-
-      router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
-    }
-  }
-
+export default function SidePeek({
+  children,
+  onClose,
+  activeContent,
+}: PropsWithChildren<SidePeekProps>) {
   return (
     <DialogTrigger>
       <Modal
         className={styles.sidePeek}
         isOpen={!!activeContent}
-        onOpenChange={handleClose}
+        onOpenChange={onClose}
       >
         <Dialog className={styles.dialog}>
           {({ close }) => (
-            <aside className={styles.content}>
-              <header className={styles.header}>
-                {activeContent && (
-                  <Title level={"h2"} as={"h3"}>
-                    {activeContent.title}
-                  </Title>
-                )}
-                <Button onPress={close} className={styles.closeBtn}>
-                  <X height={32} width={32} className={styles.closeIcon} />
-                </Button>
-              </header>
-              {activeContent && activeContent.content}
-            </aside>
+            <>
+              {Children.map(children, (child) => {
+                return cloneElement(child as React.ReactElement, {
+                  onClose: close,
+                })
+              })}
+            </>
           )}
         </Dialog>
       </Modal>