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

src/components/common/combo-box.tsx

@@ -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>
+    )
+}

src/components/common/drop-down.tsx

@@ -1,20 +0,0 @@
-import { Menu, MenuButton } from '@headlessui/react'
-import { ArrowDown2 } from 'iconsax-react'
-import { FC } from 'react'
-
-type Props = {
-    title: string
-}
-
-export const DropDown: FC<Props> = ({ title }) => {
-    return (
-
-        <Menu as="div" className="w-full">
-            <MenuButton className="input-style flex flex-row justify-between items-center p-[18px]">
-                <p className='text-secondary-text-color/70 text-base font-normal'>{title}</p>
-                <ArrowDown2 className="size-5 text-secondary-text-color/70" />
-            </MenuButton>
-        </Menu>
-
-    )
-}

src/components/common/input.tsx

@@ -1,5 +1,6 @@
 import { Eye, EyeSlash } from "iconsax-react"
-import { FC, useState } from "react"
+import React, { FC, useState } from "react"
+import { Input as InputComponent } from '@headlessui/react'
 
 type Props = {
     style?: string,
@@ -12,15 +13,15 @@ export const Input: FC<Props> = ({ placeholder, type = "text", icon }) => {
     const [hidden, setHidden] = useState<boolean>(false)
     const handleHidden = () => setHidden(prev => !prev)
     return (
-        <div className="w-full min-w-[250px] sm:min-w-[400px]">
-            <div className="relative w-full min-w-[200px]">
-                <div className="absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center text-blue-gray-500">
-                    {type === "password" ?
-                        !hidden ? <Eye size="23" color="#777577" onClick={handleHidden} /> : <EyeSlash size="23" color="#777577" onClick={handleHidden} />
-                        : icon}
-                </div>
-                <input type={type === "password" && hidden ? "text" : type} className="input-style" placeholder={placeholder} />
+
+        <div className="relative w-full min-w-[250px] sm:min-w-[400px]">
+            <div className="absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center text-blue-gray-500">
+                {type === "password" ?
+                    !hidden ? <Eye size="23" color="#777577" onClick={handleHidden} /> : <EyeSlash size="23" color="#777577" onClick={handleHidden} />
+                    : icon}
             </div>
+            <InputComponent type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className="input-style" />
         </div>
+
     )
 }