create otp page - link auth page

src/components/common/combo-box.tsx

@@ -3,11 +3,11 @@ 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: 'قاسم' },
+    { id: 1, name: 'تهران' },
+    { id: 2, name: 'شیراز' },
+    { id: 3, name: 'اصفهان' },
+    { id: 4, name: 'اراک' },
+    { id: 5, name: 'تبریز' },
 ]
 
 export const ComboBox = () => {

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

@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom"
 import { Input } from "../common/input"
 
 export const ForgotPasswordForm = () => {
@@ -17,7 +18,9 @@ export const ForgotPasswordForm = () => {
                 </div>
                 <div className="flex flex-col gap-y-[27px] items-center">
                     <button>دریافت کد تایید</button>
-                    <p className="font-medium text-base text-primary-color">بازگشت</p>
+                    <Link to="/auth/login">
+                        <p className="font-medium text-base text-primary-color">بازگشت</p>
+                    </Link>
                 </div>
             </div>
         </div>

src/components/forms/login-form.tsx

@@ -19,11 +19,11 @@ export const LoginForm = () => {
                 <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>
+                    <Link to="/auth/forgot-password"><p className="font-medium text-sm text-secondary-text-color cursor-pointer">فراموشی رمز عبور</p></Link>
                 </div>
                 <div className="flex flex-col gap-y-[27px] items-center">
                     <button>ثبت</button>
-                    <p className="font-medium text-base text-primary-color">ورود با رمز یکبار مصرف</p>
+                    <Link to="/auth/login-with-code"><p className="font-medium text-base text-primary-color cursor-pointer">ورود با رمز یکبار مصرف</p></Link>
                 </div>
             </div>
         </div>

src/components/forms/login-with-code-form.tsx

@@ -0,0 +1,28 @@
+import { Link } from "react-router-dom"
+import { Input } from "../common/input"
+
+export const LoginWithCodeForm = () => {
+    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>
+                    <Link to="/auth/login">
+                        <p className="font-medium text-base text-primary-color">بازگشت</p>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/forms/send-code-form.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import OTPInput from "react-otp-input"
+import { Link } from "react-router-dom"
+
+export const SendCodeForm = () => {
+    const [otp, setOtp] = useState('');
+    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">
+                        <div className="flex flex-col sm:flex-row gap-0.5 items-center">
+                            <p className="text-secondary-text-color font-normal text-xs md:text-sm">کد تایید ارسال شده به شماره 09376225448 را وارد کنید.</p>
+                            <Link to="/auth/login-with-code">
+                                <p className="text-primary-color font-bold text-xs md:text-sm cursor-pointer">ویرایش</p>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-9 mb-[42px] flex w-full justify-center items-center" id="otp">
+                    <OTPInput
+                        containerStyle="otp-container"
+                        value={otp}
+                        onChange={setOtp}
+                        numInputs={5}
+                        renderInput={(props) => <input {...props} />}
+                        inputStyle="otp-inputs"
+                    />
+
+                </div>
+                <div className="flex flex-col gap-y-[27px] items-center">
+                    <p className="font-normal text-secondary-text-color text-base">30 ثانیه دیگر تا دریافت کد</p>
+                    <button>تایید</button>
+                    <p className="font-medium text-base text-primary-color">ارسال مجدد</p>
+                </div>
+            </div>
+        </div>
+    )
+}