style: add animation to modal

remvze · Jan 4, 2024 · 7823dc7 · 7823dc7
1 parent 37a0736
commit 7823dc7
Showing 1 changed file with 21 additions and 4 deletions.
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
@@ -1,6 +1,8 @@
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { IoClose } from 'react-icons/io5/index';
 
+import { fade, mix, slideY } from '@/lib/motion';
+
 import styles from './modal.module.css';
 
 interface ModalProps {
@@ -10,23 +12,38 @@ interface ModalProps {
 }
 
 export function Modal({ children, onClose, show }: ModalProps) {
+  const variants = {
+    modal: mix(fade(), slideY(20)),
+    overlay: fade(),
+  };
+
   return (
     <AnimatePresence>
       {show && (
         <>
-          <div
+          <motion.div
+            animate="show"
             className={styles.overlay}
+            exit="hidden"
+            initial="hidden"
+            variants={variants.overlay}
             onClick={onClose}
             onKeyDown={onClose}
           />
           <div className={styles.modal}>
-            <div className={styles.content}>
+            <motion.div
+              animate="show"
+              className={styles.content}
+              exit="hidden"
+              initial="hidden"
+              variants={variants.modal}
+            >
               <button className={styles.close} onClick={onClose}>
                 <IoClose />
               </button>
 
               {children}
-            </div>
+            </motion.div>
           </div>
         </>
       )}