refactor: extract bottom sheet component

src/components/bottomsheet/AnimatedBottomSheet.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import BlurredOverlayContainer, { BlurredOverlayContainerProps } from '../overlays/BlurredOverlayContainer'
+import clsx from 'clsx'
+import CloseIcon from '../icons/CloseIcon'
+
+type Props = {
+    title: string
+} & BlurredOverlayContainerProps
+
+const AnimatedBottomSheet = (props: Props) => {
+    return (
+        <BlurredOverlayContainer {...props} changeDelay="150">
+            <div
+                data-visible={props.visible}
+                className={clsx(
+                    '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'
+                )}>
+                <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">
+                        <CloseIcon size={20} />
+                    </div>
+                </div>
+                {props.children}
+            </div>
+
+        </BlurredOverlayContainer>
+    )
+}
+
+export default AnimatedBottomSheet

src/components/overlays/BlurredOverlayContainer.tsx

@@ -2,8 +2,8 @@
 
 import React, { useEffect, useState } from 'react'
 
-type Props = {
-  visible?: boolean
+export type BlurredOverlayContainerProps = {
+  visible: boolean
   bgOpacity?: string
   changeDelay?: string
   effectdelay?: string
@@ -17,7 +17,7 @@ const BlurredOverlayContainer = ({
   children,
   onClick,
   ...props
-}: Props) => {
+}: BlurredOverlayContainerProps) => {
   const [loaded, setLoaded] = useState(visible)
 
   useEffect(() => {