Merged in refactor (pull request #1)

Refactor

1 files changed, 54 insertions, 0 deletions

diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
new file mode 100644
index 00000000..24366802
--- /dev/null
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -0,0 +1,54 @@
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useEffect } from 'react'
+
+const transition = { ease: 'linear', duration: 0.2 }
+
+const BottomPopup = ({ children, active = false, title, close }) => {
+  useEffect(() => {
+    if (active) {
+      document.querySelector('html, body').classList.add('overflow-hidden')
+    } else {
+      document.querySelector('html, body').classList.remove('overflow-hidden')
+    }
+  }, [active])
+
+  return (
+    <>
+      <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>
+    </>
+  )
+}
+
+export default BottomPopup