diff --git a/public/svgs/auth/reset-password.svg b/public/svgs/auth/reset-password.svg new file mode 100644 index 0000000..8281665 --- /dev/null +++ b/public/svgs/auth/reset-password.svg @@ -0,0 +1,199 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/common/combo-box.tsx b/src/components/common/combo-box.tsx new file mode 100644 index 0000000..33a27f5 --- /dev/null +++ b/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 ( + setSelected(value)} onClose={() => setQuery('')}> +
+ person?.name} + onChange={(event) => setQuery(event.target.value)} + /> + + + +
+ + + {filteredValue.map((value) => ( + +
{value?.name}
+ + ))} + + + ) +} diff --git a/src/components/common/drop-down.tsx b/src/components/common/drop-down.tsx deleted file mode 100644 index 165d3f9..0000000 --- a/src/components/common/drop-down.tsx +++ /dev/null @@ -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 = ({ title }) => { - return ( - - - -

{title}

- - - - - ) -} diff --git a/src/components/common/input.tsx b/src/components/common/input.tsx index ce10266..4eb4d48 100644 --- a/src/components/common/input.tsx +++ b/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 = ({ placeholder, type = "text", icon }) => { const [hidden, setHidden] = useState(false) const handleHidden = () => setHidden(prev => !prev) return ( -
-
-
- {type === "password" ? - !hidden ? : - : icon} -
- + +
+
+ {type === "password" ? + !hidden ? : + : icon}
+
+ ) } \ No newline at end of file diff --git a/src/components/forms/register-form.tsx b/src/components/forms/register-form.tsx index 190e61b..6c8f988 100644 --- a/src/components/forms/register-form.tsx +++ b/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 = () => {
- - + +
diff --git a/src/components/forms/reset-password.form.tsx b/src/components/forms/reset-password.form.tsx new file mode 100644 index 0000000..03d3512 --- /dev/null +++ b/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 ( +
+ logo +
+
+ بازیابی رمز عبور +
+

کد تایید ارسال شده به شماره 09376225448 را وارد کنید.

+ +

ویرایش

+ +
+
+
+ + +
+ +
+
+ ) +} \ No newline at end of file diff --git a/src/pages/auth/reset-password.tsx b/src/pages/auth/reset-password.tsx new file mode 100644 index 0000000..8905420 --- /dev/null +++ b/src/pages/auth/reset-password.tsx @@ -0,0 +1,13 @@ +import React from "react" +import { ResetPasswordForm } from "../../components/forms/reset-password.form" + +export const ResetPassword = () => { + return ( + + +
+ reset password +
+ + ) +} \ No newline at end of file diff --git a/src/router/index.tsx b/src/router/index.tsx index 34a2ec1..f2953bc 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -4,6 +4,7 @@ import App from "../App"; import { Login } from "../pages/auth/login"; import { ForgotPassword } from "../pages/auth/forgot-password"; import { Register } from "../pages/auth/register"; +import { ResetPassword } from "../pages/auth/reset-password"; export const router = createBrowserRouter([ { @@ -25,7 +26,11 @@ export const router = createBrowserRouter([ { path: "register", element: - } + }, + { + path: "reset-password", + element: + }, ] } ]) \ No newline at end of file