54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { useIsSSR } from "@react-aria/ssr"
|
|
import React, { Children, cloneElement } from "react"
|
|
import {
|
|
Dialog,
|
|
DialogTrigger,
|
|
Modal,
|
|
ModalOverlay,
|
|
} from "react-aria-components"
|
|
|
|
import { SidePeekContentKey } from "@/components/TempDesignSystem/SidePeek/types"
|
|
|
|
import styles from "./sidePeek.module.css"
|
|
|
|
import type { SidePeekProps } from "./sidePeek"
|
|
|
|
function SidePeek({
|
|
children,
|
|
handleClose,
|
|
activeSidePeek,
|
|
}: 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>
|
|
) : (
|
|
<DialogTrigger>
|
|
<ModalOverlay
|
|
className={styles.overlay}
|
|
isOpen={!!activeSidePeek}
|
|
onOpenChange={handleClose}
|
|
isDismissable
|
|
>
|
|
<Modal className={styles.sidePeek}>
|
|
<Dialog className={styles.dialog}>{sidePeekChildren}</Dialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
</DialogTrigger>
|
|
)
|
|
}
|
|
|
|
export default SidePeek
|