complete login forgot signup page - init project

src/components/common/drop-down.tsx

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,26 @@
+import { Eye, EyeSlash } from "iconsax-react"
+import { FC, useState } from "react"
+
+type Props = {
+    style?: string,
+    type?: React.HTMLInputTypeAttribute,
+    placeholder: string,
+    icon?: React.ReactNode
+}
+
+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>
+        </div>
+    )
+}

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

@@ -0,0 +1,25 @@
+import { Input } from "../common/input"
+
+export const ForgotPasswordForm = () => {
+    return (
+        <div
+            className="w-fit 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">لطفا شماره موبایل خود را وارد کنید</p>
+                    </div>
+                </div>
+                <div className="mt-9 mb-[42px]">
+                    <Input type="number" placeholder="شماره موبایل" />
+                </div>
+                <div className="flex flex-col gap-y-[27px] items-center">
+                    <button>دریافت کد تایید</button>
+                    <p className="font-medium text-base text-primary-color">بازگشت</p>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/forms/login-form.tsx

@@ -0,0 +1,31 @@
+import { Link } from "react-router-dom"
+import { Input } from "../common/input"
+
+export const LoginForm = () => {
+    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">حساب کاربری ندارید؟</p>
+                        <Link to="/auth/register">
+                            <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="number" placeholder="شماره تماس" />
+                    <Input type="password" placeholder="رمز عبور" />
+                    <p className="font-medium text-sm text-secondary-text-color cursor-pointer">فراموشی رمز عبور</p>
+                </div>
+                <div className="flex flex-col gap-y-[27px] items-center">
+                    <button>ثبت</button>
+                    <p className="font-medium text-base text-primary-color">ورود با رمز یکبار مصرف</p>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/forms/register-form.tsx

@@ -0,0 +1,35 @@
+import { Link } from "react-router-dom"
+import { DropDown } from "../common/drop-down"
+import { Input } from "../common/input"
+
+export const RegisterForm = () => {
+    return (
+        <div
+            className="w-fit sm:min-w-[500px] max-h-full overflow-y-auto xl:w-1/2 xl:p-0 xl:py-5 p-10 flex flex-col bg-auth-form items-center  gap-y-[42px] rounded-3x rounded-3xl">
+            <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
+            <div className="flex flex-col">
+                <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">از قبل یک حساب کاربری دارید؟</p>
+                        <Link to="/auth/login">
+                            <p className="text-primary-color font-bold text-xs md:text-sm cursor-pointer">وارد شوید</p>
+                        </Link>
+                    </div>
+                </div>
+                <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="شهر" />
+                    </div>
+                    <Input type="text" placeholder="نام فروشگاه" />
+                    <Input type="number" placeholder="شماره موبایل" />
+                    <Input type="password" placeholder="رمز عبور" />
+                    <Input type="password" placeholder="تکرار رمز عبور" />
+                </div>
+                <button>ثبت نام</button>
+            </div>
+        </div>
+    )
+}

src/components/ui/auth/layout.tsx

@@ -0,0 +1,10 @@
+import { Outlet } from "react-router-dom"
+
+export const AuthLayout = () => {
+    return (
+        <section
+            className="flex flex-row h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px]">
+            <Outlet />
+        </section>
+    )
+}