cart, checkout, quotation

1 files changed, 37 insertions, 18 deletions

diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 24366802..95c75473 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -1,6 +1,8 @@
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect } from 'react'
+import MobileView from '../../views/MobileView'
+import DesktopView from '../../views/DesktopView'
 
 const transition = { ease: 'linear', duration: 0.2 }
 
@@ -26,24 +28,41 @@ const BottomPopup = ({ children, active = false, title, close }) => {
               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>
+            <MobileView>
+              <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>
+            </MobileView>
+
+            <DesktopView>
+              <motion.div
+                initial={{ bottom: '35%', opacity: 0 }}
+                animate={{ bottom: '50%', opacity: 1 }}
+                exit={{ bottom: '35%', opacity: 0 }}
+                transition={transition}
+                className='fixed left-1/2 -translate-x-1/2 w-2/5 border border-gray_r-6 rounded-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>
+            </DesktopView>
           </>
         )}
       </AnimatePresence>