diff options
Diffstat (limited to 'src-migrate/common/components/elements/Modal.tsx')
| -rw-r--r-- | src-migrate/common/components/elements/Modal.tsx | 90 |
1 files changed, 0 insertions, 90 deletions
diff --git a/src-migrate/common/components/elements/Modal.tsx b/src-migrate/common/components/elements/Modal.tsx deleted file mode 100644 index c9c621e0..00000000 --- a/src-migrate/common/components/elements/Modal.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { XMarkIcon } from "@heroicons/react/24/outline"; -import { AnimatePresence, motion } from "framer-motion" -import { useRouter } from "next/router"; -import { useEffect, useState } from "react"; -import ReactDOM from "react-dom"; -import { useWindowSize } from "usehooks-ts"; -import clsxm from "~/common/libs/clsxm"; - - -type Props = { - children: React.ReactNode - active: boolean - title?: string - close?: () => void, - className?: string, - mode?: "mobile" | "desktop" -} - -const Modal = ({ - children, - active = false, - title, - close, - className, - mode -}: Props) => { - const router = useRouter() - const { width } = useWindowSize() - const [rendered, setRendered] = useState<boolean>(false) - - mode = mode || width >= 768 ? "desktop" : "mobile" - - useEffect(() => { - setRendered(true) - }, []) - - const modalClassNames = clsxm( - "fixed bg-white max-h-[80vh] overflow-auto p-4 pt-0 z-[60] border-gray_r-6", - { - "left-1/2 -translate-x-1/2 translate-y-1/2 bottom-1/2 w-11/12 md:w-[500px] border rounded-xl": mode === 'desktop', - "left-0 w-full border-t bottom-0 rounded-t-xl": mode === 'mobile' - }, - className - ) - - const variant = { - initial: { bottom: mode === 'desktop' ? '45%' : '-100%', opacity: 0 }, - animate: { bottom: mode === 'desktop' ? '50%' : 0, opacity: 1 }, - exit: { bottom: mode === 'desktop' ? '55%' : '-100%', opacity: 0 }, - transition: { ease: 'linear', duration: 0.25 } - } - - return rendered && ReactDOM.createPortal( - <AnimatePresence key={router.asPath}> - {active && ( - <motion.div - className="overlay" - initial={{ opacity: 0 }} - animate={{ opacity: 1 }} - exit={{ opacity: 0 }} - onClick={close} - /> - )} - - {active && ( - <motion.div - {...variant} - className={modalClassNames} - > - <div className='flex justify-between py-5 sticky top-0 '> - <div className='font-semibold text-h-sm md:text-title-sm'> - {title} - </div> - {close && ( - <button className="rounded-full h-10 w-10 flex justify-center items-center bg-white" type='button' onClick={close}> - <XMarkIcon className='w-5 h-5 ' /> - </button> - )} - </div> - - {children} - </motion.div> - )} - - </AnimatePresence>, - document.querySelector('body')! - ) -} - -export default Modal
\ No newline at end of file |
