fix: multioption combobox

src/app/[name]/page.tsx

@@ -13,11 +13,11 @@ import React from "react";
 import MenuItem from "@/components/listview/MenuItem";
 import Button from "@/components/button/PrimaryButton";
 import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
-import MultiOption from "@/components/combobox/MultiOption";
+import SearchComboBox from "@/components/combobox/SearchComboBox";
 import { DropdownOption } from "@/components/combobox/Combobox";
 import { Switch } from "@/components/ui/switch";
-import { LucideMedal, Medal, MedalIcon, StarHalf, StarIcon, Stars, TicketPercentIcon } from "lucide-react";
+import { TicketPercentIcon } from "lucide-react";
-import TicketDiscountIcon from "@/components/icons/TickerDiscountIcon";
+import { MedalStar } from 'iconsax-react'
 
 const categories = new Array(13).fill({ title: "خوراک", icon: "" });
 
@@ -236,12 +236,12 @@ const MenuIndex = () => {
 
       <AnimatedBottomSheet title="فیلتر ها" visible={filterModal} changeDelay="150" onClick={toggleFilterModal}>
         <div className="ps-8.5 pe-[31px] mt-[89px]">
-          <MultiOption
+          <SearchComboBox
             title="محتویات"
             options={contents}
             selectedId={selectedContentId}
             onSelectionChange={changeSelectedContent} />
-          <MultiOption
+          <SearchComboBox
             className="relative mt-9.5"
             title="روش ارسال"
             options={shippings}
@@ -251,7 +251,7 @@ const MenuIndex = () => {
             className="flex w-full mt-[23px] h-11 items-center justify-between 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"
           >
             <span className="inline-flex items-center gap-2.5 text-sm2">
-              <Medal size={16} />
+              <MedalStar size="16" color="#333333" />
               دارای امتیاز پس از خرید
             </span>
             <Switch className="w-12 h-6" />

src/components/combobox/Combobox.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@/components/ui/command"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import ArrowDownIcon from "../icons/ArrowDownIcon"
+
+export interface DropdownOption {
+    id: string;
+    label?: string;
+    title: string;
+}
+
+type Props = {
+    title: string;
+    options: Array<DropdownOption>;
+    value: string;
+    setValue: React.Dispatch<React.SetStateAction<string>>
+} & React.HTMLAttributes<HTMLDivElement>
+
+export function Combobox({ options, value, title, setValue, }: Props) {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={open}
+                    className="flex font-normal w-full h-11 items-center justify-between 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"
+                >
+                    {value
+                        ? options.find((option) => option.title === value)?.label
+                        : "انتخاب کنید"}
+                    <ArrowDownIcon />
+                    <label
+                        htmlFor='content-select'
+                        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>
+                    </label>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-full p-0">
+                <Command>
+                    <CommandInput placeholder="جستجو" className="h-9" />
+                    <CommandList>
+                        <CommandEmpty>نتیجه ای یافت نشد</CommandEmpty>
+                        <CommandGroup>
+                            {options.map((option) => (
+                                <CommandItem
+                                    key={option.id}
+                                    value={option.title}
+                                    onSelect={(currentValue) => {
+                                        setValue(currentValue === value ? "" : currentValue)
+                                        setOpen(false)
+                                    }}
+                                >
+                                    <Check
+                                        className={cn(
+                                            "",
+                                            value === option.title ? "opacity-100" : "opacity-0"
+                                        )}
+                                    />
+                                    {option.label}
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    )
+}

src/components/combobox/MultiOption.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react'
-import ArrowDownIcon from '../icons/ArrowDownIcon';
-
-export interface DropdownOption {
-    id: string;
-    title: string;
-}
-
-type Props = {
-    title: string;
-    options: Array<DropdownOption>;
-    expanded?: boolean;
-    selectedId: string;
-    onSelectionChange: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => void,
-} & React.HTMLAttributes<HTMLDivElement>
-
-function MultiOption({ title, options, expanded, selectedId, onSelectionChange, ...props }: Props) {
-    const [expand, setExpand] = useState(expanded);
-    const toggleExpand = () => {
-        setExpand((state) => !state);
-    }
-
-    return (
-        <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}
-                onClick={toggleExpand}
-                role='combobox'
-                aria-expanded={expanded}
-                aria-haspopup='listbox'
-                aria-controls=''
-                aria-label={title}>
-                <label
-                    htmlFor='content-select'
-                    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>
-                </label>
-
-
-                <div className='w-full text-sm2'>
-                    {options.filter(x => x.id === selectedId)[0]?.title ?? ''}
-                </div>
-
-                <ArrowDownIcon />
-            </div>
-
-            {expand &&
-                <div
-                    className='absolute top-full left-0 w-full mt-1 bg-white rounded-xl border border-solid border-neutral-200 shadow-lg z-10'
-                    role='listbox'
-                    aria-label={`${title} options`}>
-                    {options.map((v, i) => {
-                        return (
-                            <div
-                                onClick={(e) => {setExpand(() => false); onSelectionChange(e, i) }}
-                                key={v.id}
-                                data-selected={v.id === selectedId}
-                                className='flex items-center justify-end px-3 py-3 cursor-pointer hover:bg-gray-50 first:rounded-t-xl last:rounded-b-xl'
-                                tabIndex={0}
-                                role='option'
-                                aria-selected>
-                                <span
-                                    className='text-sm2 tracking-[0.13px] leading-5 w-full'
-                                >
-                                    {v.title}
-                                </span>
-                            </div>
-                        )
-                    })}
-                </div>
-            }
-        </div>
-    )
-}
-
-export default MultiOption

src/components/combobox/SearchComboBox.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+import ArrowDownIcon from '../icons/ArrowDownIcon';
+
+export interface DropdownOption {
+    id: string;
+    title: string;
+    label?: string;
+}
+
+type Props = {
+    title: string;
+    options: Array<DropdownOption>;
+    expanded?: boolean;
+    selectedId: string;
+    onSelectionChange: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => void,
+} & React.HTMLAttributes<HTMLDivElement>
+
+function SearchComboBox({ title, options, expanded, selectedId, onSelectionChange, ...props }: Props) {
+    const [expand, setExpand] = useState(expanded);
+    const [searchValue, setSearchValue] = useState('');
+    const toggleExpand = () => {
+        setExpand((state) => !state);
+        setSearchValue(() => '');
+    }
+    const searchChanged = (e: React.ChangeEvent<HTMLInputElement> | undefined) => {
+        setSearchValue((state) => e?.target.value ?? state);
+    }
+    const setSelection = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
+        onSelectionChange(e, index)
+        setExpand(() => false);
+    }
+
+    return (
+        <div className={`relative ${props.className ?? ''}`} {...props}>
+            <div
+                
+                className="flex group 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}
+                onClick={toggleExpand}
+                role='combobox'
+                aria-expanded={expand}
+                aria-haspopup='listbox'
+                aria-controls=''
+                aria-label={title}>
+                <label
+                    htmlFor='content-select'
+                    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>
+                </label>
+
+                <div className='w-full text-sm2'>
+                    {options.filter(x => x.id === selectedId)[0]?.title ?? ''}
+                </div>
+
+                <ArrowDownIcon data-expand={expand} className='transition-all duration-200 group-focus-within:rotate-x-180' />
+
+                <div
+                    data-expand={expand}
+                    className='group-focus-within:block hidden absolute top-full left-0 w-full mt-1 bg-white rounded-xl border border-solid border-neutral-200 shadow-lg z-10'
+                    role='listbox'
+                    aria-label={`${title} options`}>
+                    <div className='w-full p-2'>
+                        <input placeholder='جستجو ...' className='w-full outline-none text-sm2' onChange={searchChanged} value={searchValue} />
+                    </div>
+                    <hr className="text-white/40" />
+                    {options
+                        .filter((v) => v.title?.includes(searchValue))
+                        .map((v, i) => {
+                            return (
+                                <div
+                                    onClick={(e) => {setSelection(e, i)}}
+                                    key={v.id}
+                                    data-selected={v.id === selectedId}
+                                    className='flex items-center justify-end px-3 py-3 cursor-pointer hover:bg-gray-50 first:rounded-t-xl last:rounded-b-xl'
+                                    tabIndex={0}
+                                    role='option'
+                                    aria-selected>
+                                    <span
+                                        className='text-sm2 tracking-[0.13px] leading-5 w-full'
+                                    >
+                                        {v.title}
+                                    </span>
+                                </div>
+                            )
+                        })}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default SearchComboBox