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

src/components/forms/register-form.tsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom"
-import { DropDown } from "../common/drop-down"
+import { ComboBox } from "../common/combo-box"
 import { Input } from "../common/input"
 
 export const RegisterForm = () => {
@@ -20,8 +20,8 @@ export const RegisterForm = () => {
                 <div className="grid grid-cols-1 gap-y-5 mb-[42px] mt-9">
                     <Input type="text" placeholder="نام و نام خانوادگی" />
                     <div className="flex flex-col lg:flex-row gap-y-5 gap-x-4 w-full">
-                        <DropDown title="استان" />
-                        <DropDown title="شهر" />
+                        <ComboBox />
+                        <ComboBox />
                     </div>
                     <Input type="text" placeholder="نام فروشگاه" />
                     <Input type="number" placeholder="شماره موبایل" />

src/components/forms/reset-password.form.tsx

@@ -0,0 +1,28 @@
+import { Link } from "react-router-dom"
+import { Input } from "../common/input"
+
+
+export const ResetPasswordForm = () => {
+    return (
+        <div
+            className="w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
+            <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
+            <div className="flex flex-col xl:-mr-24">
+                <div className="flex flex-col gap-y-5">
+                    <span className="font-medium text-lg md:text-2xl xl:text-3xl text-primary-text-color">بازیابی رمز عبور</span>
+                    <div className="flex flex-row gap-x-0.5 items-center">
+                        <p className="text-secondary-text-color font-normal text-xs md:text-sm">کد تایید ارسال شده به شماره 09376225448 را وارد کنید.</p>
+                        <Link to="/auth/forgot-password">
+                            <p className="text-primary-color font-bold text-xs md:text-sm cursor-pointer">ویرایش</p>
+                        </Link>
+                    </div>
+                </div>
+                <div className="flex flex-col gap-y-[25px] mt-9 mb-[42px]">
+                    <Input type="password" placeholder="رمز عبور" />
+                    <Input type="password" placeholder="تکرار رمز عبور"/>
+                </div>
+                <button>ذخیره</button>
+            </div>
+        </div>
+    )
+}