fix

1 files changed, 38 insertions, 14 deletions

diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 5deceadf..933a8f11 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -1,20 +1,44 @@
 import { XMarkIcon } from "@heroicons/react/24/outline"
+import { AnimatePresence, motion } from "framer-motion"
 
-const BottomPopup = ({ children, active, title, close }) => (
+const transition = { ease: 'linear', duration: 0.2 }
+
+const BottomPopup = ({ 
+  children, 
+  active = false, 
+  title, 
+  close 
+}) => (
   <>
-    <div 
-      onClick={close} 
-      className={`overlay ${active ? 'block' : 'hidden'}`} 
-    />
-    <div className={`fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white idt-transition ${active ? 'bottom-0' : '-bottom-full'}`}>
-      <div className="flex justify-between py-4">
-        <div className="font-semibold text-h-sm">{ title }</div>
-        <button type="button" onClick={close}>
-          <XMarkIcon className="w-5 stroke-2" />
-        </button>
-      </div>
-      { children }
-    </div>
+    <AnimatePresence>
+      { active && (
+        <>
+          <motion.div
+            className="overlay"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={transition}
+            onClick={close}
+          />
+          <motion.div
+            initial={{ bottom: '-100%' }}
+            animate={{ bottom: 0 }}
+            exit={{ bottom: '-100%' }}
+            transition={transition}
+            className="fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white"
+          >
+            <div className="flex justify-between py-4">
+              <div className="font-semibold text-h-sm">{ title }</div>
+              <button type="button" onClick={close}>
+                <XMarkIcon className="w-5 stroke-2" />
+              </button>
+            </div>
+            { children }
+          </motion.div>
+        </>
+      ) }
+    </AnimatePresence>
   </>
 )