complete reset password page - change input component - create combobox component

2024-08-05 12:20:59 +03:30
parent 7c22c9e132
commit 0e5089aad5
8 changed files with 313 additions and 33 deletions
@@ -0,0 +1,54 @@
+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 min-w-full lg:min-w-[200px] lg:max-w-[200px]">
+                <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>
+    )
+}