feat: add SidePeek

components/TempDesignSystem/SidePeek/index.tsx

@@ -0,0 +1,70 @@
+"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 Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./sidePeek.module.css"
+
+type SidePeekProps = {
+  content: Record<string, { title: string; content: ReactNode }>
+}
+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 })
+    }
+  }
+
+  return (
+    <DialogTrigger>
+      <Modal
+        className={styles.sidePeek}
+        isOpen={!!activeContent}
+        onOpenChange={handleClose}
+      >
+        <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>
+          )}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  )
+}