hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

page set code

Browse Source
This commit is contained in:
Ehsan
2024-06-24 03:56:29 +03:30
parent 2e561762fa
commit 4fbef73d00
6 changed files with 106 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/signin/page.js
+3 -3
View File
@@ -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 /> :
<SignInPage />}
<SetCodePage setIsSendMsg={setIsSendMsg} /> :
<SignInPage setIsSendMsg={setIsSendMsg} />}
</RegisterPage>
</div>
)
components/icons/ArrowLeftOrangeS.js
+10
View File
@@ -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
+10
View File
@@ -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
+45 -4
View File
@@ -1,7 +1,48 @@
function SetCodePage() {
return (
<div>SetCodePage</div>
)
import { Button } from "@mui/material"
import ArrowRightS from "../icons/ArrowRightS"
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
+8 -5
View File
@@ -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] font-normal'>شماره همراه خود را وارد نمایید.</p>
</div>
<p className='text-[#616161] text-[14px] mt-[48px] font-normal'>شماره همراه خود را وارد نمایید.</p>
<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
+30
View File
@@ -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