refactor: extract bottom sheet component

2025-07-11 15:35:00 +03:30
parent 7cc996750b
commit 20e8be4d09
3 changed files with 51 additions and 28 deletions
@@ -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