refactor: Move Sidepeek param logic to SidePeekProvider

components/TempDesignSystem/SidePeek/index.tsx

@@ -1,15 +1,20 @@
 "use client"
 
 import { useIsSSR } from "@react-aria/ssr"
-import React, { Children, cloneElement } from "react"
+import { useContext } from "react"
 import {
   Dialog,
   DialogTrigger,
   Modal,
   ModalOverlay,
 } from "react-aria-components"
+import { useIntl } from "react-intl"
 
-import { SidePeekContentKey } from "@/components/TempDesignSystem/SidePeek/types"
+import { CloseIcon } from "@/components/Icons"
+import { SidePeekContext } from "@/components/SidePeekProvider"
+
+import Button from "../Button"
+import Title from "../Text/Title"
 
 import styles from "./sidePeek.module.css"
 
@@ -17,33 +22,61 @@ import type { SidePeekProps } from "./sidePeek"
 
 function SidePeek({
   children,
+  title,
+  contentKey,
   handleClose,
-  activeSidePeek,
+  isOpen,
 }: React.PropsWithChildren<SidePeekProps>) {
-  const sidePeekChildren = Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return child
-    }
-    return cloneElement(child as React.ReactElement, {
-      isActive:
-        (child.props.contentKey as SidePeekContentKey) === activeSidePeek,
-      onClose: handleClose,
-    })
-  })
-
   const isSSR = useIsSSR()
-  return isSSR ? (
-    <div>{children}</div>
-  ) : (
+  const intl = useIntl()
+  const context = useContext(SidePeekContext)
+  function onClose() {
+    const closeHandler = handleClose || context?.handleClose
+    closeHandler && closeHandler(false)
+  }
+
+  if (isSSR) {
+    return (
+      <div>
+        <h2>{title}</h2>
+        {children}
+      </div>
+    )
+  }
+  return (
     <DialogTrigger>
       <ModalOverlay
         className={styles.overlay}
-        isOpen={!!activeSidePeek}
-        onOpenChange={handleClose}
+        isOpen={isOpen || contentKey === context?.activeSidePeek}
+        onOpenChange={onClose}
         isDismissable
       >
-        <Modal className={styles.sidePeek}>
-          <Dialog className={styles.dialog}>{sidePeekChildren}</Dialog>
+        <Modal className={styles.modal}>
+          <Dialog className={styles.dialog}>
+            <aside className={styles.sidePeek}>
+              <header className={styles.header}>
+                {title ? (
+                  <Title
+                    color="burgundy"
+                    textTransform="uppercase"
+                    level="h2"
+                    as="h3"
+                  >
+                    {title}
+                  </Title>
+                ) : null}
+                <Button
+                  aria-label={intl.formatMessage({ id: "Close" })}
+                  className={styles.closeButton}
+                  intent="text"
+                  onPress={onClose}
+                >
+                  <CloseIcon color="burgundy" height={32} width={32} />
+                </Button>
+              </header>
+              <div className={styles.sidePeekContent}>{children}</div>
+            </aside>
+          </Dialog>
         </Modal>
       </ModalOverlay>
     </DialogTrigger>