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" />

src/components/dropdown/MultiOption.tsx

@@ -21,7 +21,7 @@ function MultiOption({ title, options, expanded, selectedId, onSelectionChange,
     }
 
     return (
-        <div className="relative" {...props}>
+        <div className={`relative ${props.className ?? ''}`} {...props}>
             <div
                 className="flex w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
                 tabIndex={0}
@@ -33,7 +33,7 @@ function MultiOption({ title, options, expanded, selectedId, onSelectionChange,
                 aria-label={title}>
                 <label
                     htmlFor='content-select'
-                    className='inline-flex flex-col items-end justify-center px-1 py-0 absolute -top-6 right-0 z-[2]'>
+                    className='pointer-events-none inline-flex flex-col items-end justify-center px-1 py-0 absolute -top-6 right-0 z-[2]'>
                     <span className='relative w-fit mt-[-1px] text-xs tracking-[0] leading-4 whitespace-nowrap'>
                         {title}
                     </span>