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,31 +193,23 @@ const MenuIndex = () => {
         </VerticalScrollView>
       </section>
 
-      <BlurredOverlayContainer 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">
-              <Button>اعمال فیلتر</Button>
-            </div>
-            <div className="w-full">
-              <Button className="bg-disabled! text-disabled-text!">حذف فیلتر</Button>
-            </div>
+      <AnimatedBottomSheet visible={filterModal} changeDelay="150" onClick={toggleFilterModal}>
+        <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>
-      </BlurredOverlayContainer>
+        <hr className="text-white/40 mb-7 mt-12" />
+        <div className="px-9 flex justify-between gap-[22px]">
+          <div className="w-full">
+            <Button>اعمال فیلتر</Button>
+          </div>
+          <div className="w-full">
+            <Button className="bg-disabled! text-disabled-text!">حذف فیلتر</Button>
+          </div>
+        </div>
+      </AnimatedBottomSheet>
     </div>
   );
 };