add: add address page

src/components/bottomsheet/AnimatedBottomSheet.tsx

@@ -5,10 +5,14 @@ import CloseIcon from '../icons/CloseIcon'
 import { motion, PanInfo, Variants } from 'framer-motion'
 
 type Props = {
-    title: string
+    title?: string,
+    showCloseButton?: boolean,
+    showTitle?: boolean,
+    blurOpacity?: string | number | null,
+    overrideClassName?: string,
 } & BlurredOverlayContainerProps
 
-const AnimatedBottomSheet = (props: Props) => {
+const AnimatedBottomSheet = ({ blurOpacity = 64, overrideClassName = '', showTitle = true, showCloseButton = true, ...props }: Props) => {
     const closeRef: React.Ref<HTMLDivElement> | undefined = useRef(null);
 
     const variants: Variants = {
@@ -43,18 +47,26 @@ const AnimatedBottomSheet = (props: Props) => {
                 onDragEnd={onDrag}
                 data-visible={props.visible}
                 className={clsx(
-                    'absolute left-0 w-full bg-white/64 rounded-t-4xl pt-[39px] pb-6',
-                    'bottom-0'
+                    overrideClassName ?? '',
+                    'absolute left-0 w-full rounded-t-4xl pt-[39px] pb-6',
+                    'bottom-0',
+                    blurOpacity ? `bg-container/${blurOpacity}` : 'bg-container'
                 )}
                 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 ref={closeRef} onClick={props.onClick} className="bg-white/38 w-8 h-8 rounded-full p-1.5">
-                        <CloseIcon size={20} />
-                    </div>
+                    {showTitle &&
+                        <div className='text-lg font-medium text-black leading-8 mt-2.5'>
+                            {props.title}
+                        </div>
+                    }
+                    {showCloseButton &&
+                        <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}
             </motion.div>