Alihaghighattalab
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
|
|
import { ArrowDown2 } from 'iconsax-react'
|
|
import { useState } from 'react'
|
|
|
|
const value = [
|
|
{ id: 1, name: 'تهران' },
|
|
{ id: 2, name: 'شیراز' },
|
|
{ id: 3, name: 'اصفهان' },
|
|
{ id: 4, name: 'اراک' },
|
|
{ id: 5, name: 'تبریز' },
|
|
]
|
|
|
|
export const ComboBox = () => {
|
|
const [query, setQuery] = useState('')
|
|
const [selected, setSelected] = useState(value[1])
|
|
|
|
const filteredValue =
|
|
query === ''
|
|
? value
|
|
: value?.filter((value) => {
|
|
return value.name.toLowerCase().includes(query.toLowerCase())
|
|
})
|
|
|
|
return (
|
|
<Combobox value={selected} onChange={(value: any) => setSelected(value)} onClose={() => setQuery('')}>
|
|
<div className="relative w-full">
|
|
<ComboboxInput
|
|
className="input-style"
|
|
displayValue={(person: any) => person?.name}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
/>
|
|
<ComboboxButton className="absolute top-0 h-full bg-transparent">
|
|
<ArrowDown2 className="size-5 absolute left-3 top-5 p-0 text-secondary-text-color/70" />
|
|
</ComboboxButton>
|
|
</div>
|
|
|
|
<ComboboxOptions
|
|
anchor="bottom start"
|
|
transition
|
|
className="bg-white shadow min-w-[220px] mt-2 rounded-xl p-2"
|
|
>
|
|
{filteredValue.map((value) => (
|
|
<ComboboxOption
|
|
key={value?.id}
|
|
value={value}
|
|
className="group flex cursor-default items-center gap-2 rounded-lg py-1.5 px-3 select-none data-[focus]:bg-secondary-text-color/10"
|
|
>
|
|
<div className="text-sm/6 text-black">{value?.name}</div>
|
|
</ComboboxOption>
|
|
))}
|
|
</ComboboxOptions>
|
|
</Combobox>
|
|
)
|
|
}
|