import { Box } from 'theme-ui' import { motion, AnimatePresence } from 'framer-motion' const variants = { default: { opacity: 0 }, enter: { opacity: 1, display: 'block', transition: { duration: 0.35 } }, exit: { opacity: 0, transition: { duration: 0.2 } } } const innerVariants = { default: { y: 60 }, enter: { y: 0 }, exit: { y: 30 } } export const Overlay = ({ backgroundColor, color, children, onClose, fullWidth, isOpen, ...props }) => { const onDismiss = (event) => { if (event.target.dataset.overlayAction === 'close') { onClose(event) } } return ( <AnimatePresence> {isOpen && ( <motion.div variants={variants} initial='default' animate='enter' exit='exit' > <Box data-overlay-action='close' sx={{ display: 'flex', p: [2, '', 4], position: 'fixed', top: 0, right: 0, bottom: 0, left: 0, backgroundColor: 'rgba(0,0,0,0.85)', zIndex: 950, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }} onClick={onDismiss} > <motion.div style={{ maxWidth: '100%' }} variants={innerVariants}> <Box sx={{ borderRadius: 4, display: 'flex', flexDirection: 'column', bg: backgroundColor, color: color, position: 'relative', zIndex: 999, width: fullWidth ? '100%' : 560, maxWidth: '100%', overflow: 'auto', p: 4 }} {...props} > {children} </Box> </motion.div> </Box> </motion.div> )} </AnimatePresence> ) }