add: dropdown component

src/app/[name]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo, useState } from "react";
+import { MouseEventHandler, useCallback, useMemo, useState } from "react";
 import SearchBox from "@/components/input/SearchBox";
 import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
 import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
@@ -11,9 +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 CloseIcon from "@/components/icons/CloseIcon";
 import Button from "@/components/button/PrimaryButton";
 import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
+import MultiOption, { DropdownOption } from "@/components/dropdown/MultiOption";
 
 const categories = new Array(13).fill({ title: "خوراک", icon: "" });
 
@@ -118,10 +118,26 @@ const foods = [
   }
 ];
 
+const sortings = [
+  'محبوب ترین',
+  'بالاترین امتیاز',
+  'جدید ترین',
+  'ارزان ترین',
+  'گران ترین',
+]
+
+const contents: Array<DropdownOption> = [
+  { id: '0', title: 'گیاهی' },
+  { id: '1', title: 'حیوانی' }
+]
+
 const MenuIndex = () => {
   const [search, setSearch] = useState("");
   const [selectedCategory, setSelectedCategory] = useState(0);
   const [filterModal, setFilterModal] = useState(false);
+  const [sortingModal, setSortingModal] = useState(false);
+  const [sorting, setSorting] = useState(0);
+  const [selectedContentId, setSelectedContentId] = useState('0');
 
   const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
@@ -135,6 +151,17 @@ const MenuIndex = () => {
     setFilterModal((state) => !state);
   }, []);
 
+  const toggleSortingModal = useCallback(() => {
+    setSortingModal((state) => !state);
+  }, []);
+
+  const changeSorting = (index: number) => {
+    setSorting(() => index);
+  }
+
+  const changeSelectedContent = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
+    setSelectedContentId(() => contents[index]?.id || contents[0].id);
+  }
 
   const filteredReceiptItems = useMemo(() => {
     const lowerSearch = search.toLowerCase();
@@ -178,7 +205,7 @@ const MenuIndex = () => {
               <EqualizerIcon />
               <span className="text-xs leading-5">فیلتر بر اساس</span>
             </button>
-            <button className="rounded-lg h-8 bg-white p-1.5">
+            <button onClick={toggleSortingModal} className="rounded-lg h-8 bg-white p-1.5">
               <TextAlignIcon />
             </button>
           </div>
@@ -193,15 +220,16 @@ const MenuIndex = () => {
         </VerticalScrollView>
       </section>
 
-      <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>
+      <AnimatedBottomSheet title="فیلتر ها" visible={filterModal} changeDelay="150" onClick={toggleFilterModal}>
+        <div className="ps-8.5 pe-[31px] mt-[89px]">
+          <MultiOption
+            title="محتویات"
+            options={contents}
+            selectedId={selectedContentId}
+            onSelectionChange={changeSelectedContent} />
         </div>
-        <hr className="text-white/40 mb-7 mt-12" />
-        <div className="px-9 flex justify-between gap-[22px]">
+        <div className="px-9 pt-13 flex justify-between gap-[22px]">
+          <hr className="text-white/40 mb-7 mt-12" />
           <div className="w-full">
             <Button>اعمال فیلتر</Button>
           </div>
@@ -210,6 +238,21 @@ const MenuIndex = () => {
           </div>
         </div>
       </AnimatedBottomSheet>
+
+      <AnimatedBottomSheet title="مرتب کردن بر اساس" visible={sortingModal} changeDelay="150" onClick={toggleSortingModal}>
+        <div className="px-8.5 py-10 justify-between">
+          {sortings.map((v, i) => {
+            return (
+              <div key={i}>
+                <div onClick={() => changeSorting(i)} className="text-sm2 font-medium cursor-pointer">
+                  {v}
+                </div>
+                {i < sortings.length - 1 && <hr className="text-white/40 mb-4 mt-4" />}
+              </div>
+            )
+          })}
+        </div>
+      </AnimatedBottomSheet>
     </div>
   );
 };