Untitled
unknown
plain_text
5 months ago
1.8 kB
4
Indexable
import { cn, modalZIndex } from "@/_utils/utils"; import { AnimatePresence, motion, MotionProps } from "framer-motion"; import React, { PropsWithChildren } from "react"; import ReactModal from "react-modal"; type PopupPageProps = { isOpen: boolean; onClose: () => void; } & PropsWithChildren; export function PopupPage({ isOpen, onClose, children }: PopupPageProps) { return ( <ReactModal isOpen={isOpen} closeTimeoutMS={300} onRequestClose={onClose} overlayClassName={`${modalZIndex} bg-black/20 fixed inset-0`} overlayElement={(props, children) => ( <AnimatePresence> {isOpen && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 100 }} exit={{ opacity: 0 }} data-testid="modal-overlay" {...(props as MotionProps)} > {children} </motion.div> )} </AnimatePresence> )} className={cn( "absolute inset-x-0 bottom-0 top-8 mx-auto max-w-screen-md rounded-t-2xl bg-white p-4 outline-none", "max-sm:[--transform-from:translateY(10%)] max-sm:[--transform-to:translateY(0%)]", "sm:[--transform-from:scale(90%)] sm:[--transform-to:scale(100%)]", "sm:inset-12 sm:rounded-2xl sm:p-6 sm:shadow-lg", )} contentElement={(props, children) => ( <motion.div initial={{ opacity: 0, transform: "var(--transform-from)" }} animate={{ opacity: 100, transform: "var(--transform-to)" }} exit={{ opacity: 0, transform: "var(--transform-from)" }} {...(props as MotionProps)} > {children} </motion.div> )} > {children} </ReactModal> ); }
Editor is loading...
Leave a Comment