imrove: animate bottomsheet and drag support

src/components/bottomsheet/AnimatedBottomSheet.tsx

@@ -1,32 +1,66 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import BlurredOverlayContainer, { BlurredOverlayContainerProps } from '../overlays/BlurredOverlayContainer'
 import clsx from 'clsx'
 import CloseIcon from '../icons/CloseIcon'
+import { motion, PanInfo, Variants } from 'framer-motion'
 
 type Props = {
     title: string
 } & BlurredOverlayContainerProps
 
 const AnimatedBottomSheet = (props: Props) => {
+    const closeRef: React.Ref<HTMLDivElement> | undefined = useRef(null);
+
+    const variants: Variants = {
+        hidden: {
+            y: '100%',
+        },
+        visible: {
+            y: 0,
+            transition: {
+                duration: 0.1,
+                ease: 'easeInOut',
+            },
+        },
+    };
+
+    const onDrag = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+        if (info.offset.y > 200) {
+            if (closeRef.current) {
+                closeRef.current.click();
+            }
+        }
+    }
+
     return (
-        <BlurredOverlayContainer {...props} inDelay={150}>
-            <div
+        <BlurredOverlayContainer {...props} outDelay={100}>
+            <motion.div
+                drag='y'
+                dragConstraints={{ top: 0, bottom: 0 }}
+                transition={{ type: "spring", stiffness: 200, damping: 20 }}
+                dragTransition={{ bounceDamping: 10, bounceStiffness: 600 }}
+                dragElastic={0.05}
+                onDragEnd={onDrag}
                 data-visible={props.visible}
                 className={clsx(
-                    'border border-solid border-white absolute -bottom-full left-0 w-full bg-white/64 rounded-t-4xl pt-[39px] pb-6',
-                    'data-[visible=true]:bottom-0 transition-all duration-150 backdrop-blur-2xl'
-                )}>
+                    'absolute left-0 w-full bg-white/64 rounded-t-4xl pt-[39px] pb-6',
+                    'bottom-0'
+                )}
+                initial="hidden"
+                animate={props.visible ? 'visible' : 'hidden'}
+                variants={variants}
+            >
                 <div className="ps-[31px] pe-[33px] flex justify-between">
                     <div className='text-lg font-medium text-black leading-8 mt-2.5'>{props.title}</div>
-                    <div onClick={props.onClick} className="bg-white/38 w-8 h-8 rounded-full p-1.5">
+                    <div ref={closeRef} onClick={props.onClick} className="bg-white/38 w-8 h-8 rounded-full p-1.5">
                         <CloseIcon size={20} />
                     </div>
                 </div>
                 {props.children}
-            </div>
+            </motion.div>
 
         </BlurredOverlayContainer>
     )
 }
 
-export default AnimatedBottomSheet
+export default AnimatedBottomSheet