add: menu filter modal

src/app/[name]/page.tsx

@@ -11,6 +11,10 @@ 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";
 
 const categories = new Array(13).fill({ title: "خوراک", icon: "" });
 
@@ -118,6 +122,7 @@ const foods = [
 const MenuIndex = () => {
   const [search, setSearch] = useState("");
   const [selectedCategory, setSelectedCategory] = useState(0);
+  const [filterModal, setFilterModal] = useState(false);
 
   const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
@@ -127,6 +132,11 @@ const MenuIndex = () => {
     setSelectedCategory(id);
   }, []);
 
+  const toggleFilterModal = useCallback(() => {
+    setFilterModal((state) => !state);
+  }, []);
+
+
   const filteredReceiptItems = useMemo(() => {
     const lowerSearch = search.toLowerCase();
     return foods.filter(
@@ -136,6 +146,7 @@ const MenuIndex = () => {
     );
   }, [selectedCategory, search]);
 
+
   return (
     <div className="flex flex-col gap-4 pt-4 items-center">
       <SearchBox value={search} onChange={updateSearch} />
@@ -164,7 +175,7 @@ const MenuIndex = () => {
             {categories[selectedCategory]?.title}
           </span>
           <div className="inline-flex gap-2 justify-around items-center">
-            <button className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+            <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
               <EqualizerIcon />
               <span className="text-xs leading-5">فیلتر بر اساس</span>
             </button>
@@ -182,6 +193,32 @@ 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>
+          </div>
+        </div>
+      </BlurredOverlayContainer>
     </div>
   );
 };