refactor: extract bottom sheet component

src/app/[name]/page.tsx

@@ -11,10 +11,9 @@ import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
 import React from "react";
 import MenuItem from "@/components/listview/MenuItem";
-import BlurredOverlayContainer from "@/components/overlays/BlurredOverlayContainer";
 import CloseIcon from "@/components/icons/CloseIcon";
-import clsx from "clsx";
 import Button from "@/components/button/PrimaryButton";
+import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
 
 const categories = new Array(13).fill({ title: "خوراک", icon: "" });
 
@@ -194,20 +193,13 @@ const MenuIndex = () => {
         </VerticalScrollView>
       </section>
 
-      <BlurredOverlayContainer visible={filterModal} changeDelay="150" onClick={toggleFilterModal}>
+      <AnimatedBottomSheet visible={filterModal} changeDelay="150" onClick={toggleFilterModal}>
-        <div
-          data-visible={filterModal}
-          className={clsx(
-            'absolute -bottom-full left-0 w-full bg-white/64 rounded-t-4xl pt-10 pb-6',
-            'data-[visible=true]:bottom-0 transition-all duration-150'
-          )}>
         <div className="px-8 flex justify-between">
           <div>فیلتر ها</div>
           <div onClick={toggleFilterModal} className="bg-white/38 w-8 h-8 rounded-full p-1.5">
             <CloseIcon size={20} />
           </div>
         </div>
-
         <hr className="text-white/40 mb-7 mt-12" />
         <div className="px-9 flex justify-between gap-[22px]">
           <div className="w-full">
@@ -217,8 +209,7 @@ const MenuIndex = () => {
             <Button className="bg-disabled! text-disabled-text!">حذف فیلتر</Button>
           </div>
         </div>
-        </div>
+      </AnimatedBottomSheet>
-      </BlurredOverlayContainer>
     </div>
   );
 };

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 = {
+export type BlurredOverlayContainerProps = {
-  visible?: boolean
+  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(() => {