refactor: reorganize component organization

components/TempDesignSystem/SidePeek/Container/index.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/content.module.css

@@ -0,0 +1,25 @@
+.content {
+  display: grid;
+  grid-template-rows: min-content auto;
+  gap: var(--Spacing-x4);
+  height: 100%;
+  padding: var(--Spacing-x4) var(--Spacing-x5);
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.header:has(> h2) {
+  justify-content: space-between;
+}
+
+.closeBtn {
+  border: none;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  cursor: pointer;
+}

components/TempDesignSystem/SidePeek/Content/index.tsx

@@ -3,10 +3,9 @@
 import { Children, PropsWithChildren } from "react"
 
 import { CloseIcon } from "@/components/Icons"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
-import Title from "../Text/Title"
-
-import styles from "./sidePeek.module.css"
+import styles from "./content.module.css"
 
 export default function Content({
   title,
@@ -24,7 +23,12 @@ export default function Content({
     <aside className={styles.content}>
       <header className={styles.header}>
         {title && (
-          <Title level={"h2"} as={"h3"}>
+          <Title
+            color="burgundy"
+            textTransform="uppercase"
+            level={"h2"}
+            as={"h3"}
+          >
             {title}
           </Title>
         )}

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -18,41 +18,10 @@
   animation: slide-up 300ms reverse;
 }
 
-.header {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.header:has(> h2) {
-  justify-content: space-between;
-}
-
-.title {
-  text-transform: uppercase;
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.closeBtn {
-  border: none;
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  cursor: pointer;
-}
-
 .dialog {
   height: 100%;
 }
 
-.content {
-  display: grid;
-  grid-template-rows: min-content auto;
-  gap: var(--Spacing-x4);
-  height: 100%;
-  padding: var(--Spacing-x4) var(--Spacing-x5);
-}
-
 @keyframes slide-in {
   from {
     right: -600px;