diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-03-23 17:01:03 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-03-23 17:01:03 +0700 |
| commit | a49f5a3f968dcc8c84759a382a0762abf0bc758b (patch) | |
| tree | 15f9ee680ab8a9dbfbf2541c8b5f5ab50881ca72 /src/core/components/elements/Popup | |
| parent | d178a520534af7d1cbcc03134034ad8a2327b461 (diff) | |
cart, checkout, quotation
Diffstat (limited to 'src/core/components/elements/Popup')
| -rw-r--r-- | src/core/components/elements/Popup/BottomPopup.jsx | 55 |
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> |