add: shipping dropdown

src/app/[name]/page.tsx

@@ -131,6 +131,11 @@ const contents: Array<DropdownOption> = [
   { id: '1', title: 'حیوانی' }
 ]
 
+const shippings: Array<DropdownOption> = [
+  { id: '0', title: 'ارسال با پیک' },
+]
+
+
 const MenuIndex = () => {
   const [search, setSearch] = useState("");
   const [selectedCategory, setSelectedCategory] = useState(0);
@@ -138,6 +143,7 @@ const MenuIndex = () => {
   const [sortingModal, setSortingModal] = useState(false);
   const [sorting, setSorting] = useState(0);
   const [selectedContentId, setSelectedContentId] = useState('0');
+  const [selectedShippingId, setSelectedShippingId] = useState('0');
 
   const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
@@ -163,6 +169,10 @@ const MenuIndex = () => {
     setSelectedContentId(() => contents[index]?.id || contents[0].id);
   }
 
+  const changeSelectedShipping = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
+    setSelectedShippingId(() => contents[index]?.id || contents[0].id);
+  }
+
   const filteredReceiptItems = useMemo(() => {
     const lowerSearch = search.toLowerCase();
     return foods.filter(
@@ -227,6 +237,12 @@ const MenuIndex = () => {
             options={contents}
             selectedId={selectedContentId}
             onSelectionChange={changeSelectedContent} />
+          <MultiOption
+            className="relative mt-9.5"
+            title="روش ارسال"
+            options={shippings}
+            selectedId={selectedShippingId}
+            onSelectionChange={changeSelectedShipping} />
         </div>
         <div className="px-9 pt-13 flex justify-between gap-[22px]">
           <hr className="text-white/40 mb-7 mt-12" />