page set code

app/signin/page.js

@@ -6,14 +6,14 @@ import { useState } from 'react';
 
 function SignIn() {
 
-    const [isSendMsg, setIsSendMsg] = useState(false);
+    const [isSendMsg, setIsSendMsg] = useState(true);
 
     return (
         <div>
             <RegisterPage>
                 {isSendMsg ?
-                    <SetCodePage /> :
+                    <SetCodePage setIsSendMsg={setIsSendMsg} /> :
-                    <SignInPage />}
+                    <SignInPage setIsSendMsg={setIsSendMsg} />}
             </RegisterPage>
         </div>
     )

components/icons/ArrowLeftOrangeS.js

@@ -0,0 +1,10 @@
+function ArrowLeftOrangeS() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M7.97484 4.94167L2.9165 10L7.97484 15.0583" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M17.0831 10H3.05811" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowLeftOrangeS

components/icons/ArrowRightS.js

@@ -0,0 +1,10 @@
+function ArrowRightS() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M12.0249 4.94167L17.0832 10L12.0249 15.0583" stroke="#525252" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M2.9165 10H16.9415" stroke="#525252" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowRightS

components/register/SetCodePage.js

@@ -1,7 +1,48 @@
-function SetCodePage() {
+import { Button } from "@mui/material"
-  return (
+import ArrowRightS from "../icons/ArrowRightS"
-    <div>SetCodePage</div>
+import OTPForm from "./element/OTPForm"
-  )
+import ArrowLeftOrangeS from "../icons/ArrowLeftOrangeS"
+
+function SetCodePage({ setIsSendMsg }) {
+
+    const handleOTP = (e) => {
+        e.target.nextElementSibling &&
+            e.target.nextElementSibling.focus()
+    }
+
+    return (
+        <div className='rounded-[16px] mt-[32px] border border-solid border-[#EFEFEF] bg-[#FFF] p-[40px] pb-[48px] min-w-[425px]'>
+            <div
+                className="cursor-pointer"
+                onClick={() => setIsSendMsg(false)}
+            >
+                <ArrowRightS />
+            </div>
+            <p className='text-[#525252] mt-4 text-[18px] font-bold'>کد تایید را وارد نمایید</p>
+            <p className='text-[#616161] mt-[24px] text-[14px] font-normal text-right'>
+                کد تایید برای شماره 09013261200 ارسال شد.
+            </p>
+            <div className='mt-[32px] mb-[48px]'>
+                <div className="w-full mb-[27px] flex items-center justify-center gap-2 sm:gap-6" dir='ltr'>
+                    <OTPForm handleOTP={handleOTP} />
+                    <OTPForm handleOTP={handleOTP} />
+                    <OTPForm handleOTP={handleOTP} />
+                    <OTPForm handleOTP={handleOTP} />
+                    <OTPForm handleOTP={handleOTP} />
+                </div>
+                <Button className="flex items-center justify-start gap-1">
+                    <p className="text-[#F17732] text-[14px] font-medium">دریافت مجدد کد تایید</p>
+                    <ArrowLeftOrangeS />
+                </Button>
+            </div>
+            <Button
+                fullWidth
+                variant='contained'
+                onClick={() => setIsSendMsg(true)}
+                className='!rounded-[8px] !bg-[#5559CE]'
+            >تایید</Button>
+        </div>
+    )
 }
 
 export default SetCodePage

components/register/SignInPage.js

@@ -2,20 +2,23 @@ import Field from '@/app/component/element/Field'
 import { Button } from '@mui/material'
 import React from 'react'
 
-function SignInPage() {
+function SignInPage({ setIsSendMsg }) {
     return (
         <div className='rounded-[16px] mt-[32px] border border-solid border-[#EFEFEF] bg-[#FFF] p-[40px] pb-[48px] min-w-[425px]'>
             <p className='text-[#525252] text-[18px] font-bold'>ورود یا ثبت نام در نوبت 724</p>
-            <div className='flex flex-col justify-center gap-[24px] mt-[48px] items-center'>
+            <p className='text-[#616161] text-[14px] mt-[48px] font-normal'>شماره همراه خود را وارد نمایید.</p>
-                <p className='text-[#616161] text-[14px] font-normal'>شماره همراه خود را وارد نمایید.</p>
-            </div>
             <div className='mt-[24px] mb-[32px]'>
                 <Field
                     type='number'
                     title='شماره همراه'
                 />
             </div>
-            <Button variant='contained' fullWidth className='!rounded-[8px] !bg-[#5559CE]'>ورود</Button>
+            <Button
+                fullWidth
+                variant='contained'
+                onClick={() => setIsSendMsg(true)}
+                className='!rounded-[8px] !bg-[#5559CE]'
+            >ورود</Button>
             <p className='text-[#525252] text-[14px] font-normal text-center mt-[76px]'><span className='text-[#F17732] underline'>قوانین استفاده</span> از نوبت 724 را می پذیرم.</p>
         </div>
     )

components/register/element/OTPForm.js

@@ -0,0 +1,30 @@
+import { useState } from "react"
+
+function OTPForm({ handleOTP }) {
+
+    const [code, setCode] = useState('');
+
+    return (
+        <input
+            value={code}
+            onChange={e => {
+                const value = e.target.value
+
+                if (/^\d+$/.test(value) && value.length < 2) {
+                    setCode(value)
+                    handleOTP(e)
+                } else {
+                    setCode('')
+                    e.target.value = ''
+                }
+            }}
+            className={`w-12 h-12 border border-solid border-[#ADB5BD] rounded-[6px] text-center transition-all duration-500 ease-out
+            outline-none focus:!border-[1px] focus:!border-solid focus:!border-[#5559CE]
+            focus:!outline-[1px] focus:!outline-solid focus:!outline-[#5559CE] 
+            ${code && '!border-[1px] !border-solid !border-[#5559CE]'}
+            `}
+        />
+    )
+}
+
+export default OTPForm