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

add prettier formatter to all file

Browse Source
This commit is contained in:
Ehsan
2024-09-25 11:03:44 +03:30
parent fa38ee2b21
commit eda896e917
410 changed files with 47636 additions and 43842 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/register/SetCodePage.js
+111 -103
View File
@@ -1,4 +1,4 @@
import { useRef, useState } from "react"
import { useRef, useState } from "react";
import Link from "next/link";
import { Button } from "@mui/material";
@@ -10,120 +10,128 @@ import ArrowRightS from "../icons/ArrowRightS";
const time_resend_code = 120;
function SetCodePage({ setIsSendMsg, link, setStep }) {
const retryIcon = useRef();
const retryIcon = useRef();
const [timer, setTimer] = useState(0);
const [timer, setTimer] = useState(0);
const handleTimer = () => {
setTimer("loading");
setTimeout(() => {
setTimer(time_resend_code);
let timePresent = time_resend_code;
const timerInterval = setInterval(() => {
timePresent--;
setTimer(timePresent);
const handleTimer = () => {
setTimer('loading');
setTimeout(() => {
setTimer(time_resend_code);
let timePresent = time_resend_code;
const timerInterval = setInterval(() => {
timePresent--;
setTimer(timePresent);
!timePresent && clearInterval(timerInterval);
}, 1000);
}, 1000);
};
!timePresent && clearInterval(timerInterval)
}, 1000);
}, 1000);
}
const handleOTP = (e) => {
e.target.nextElementSibling && e.target.nextElementSibling.focus();
};
const handleOTP = (e) => {
e.target.nextElementSibling &&
e.target.nextElementSibling.focus()
}
return (
<div className='rounded-[16px] mt-[51px] sm:mt-[45px] md:mt-[39px] lg:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF]
p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px]'>
<div
className="cursor-pointer"
onClick={() => {
setStep && setStep(prev => prev - 1)
setIsSendMsg && setIsSendMsg(false)
}}
>
<ArrowRightS />
</div>
<p className='text-[#525252] mt-[10px] sm:mt-[12px] md:mt-[14px] lg:mt-[16px] text-[18px] font-bold'>کد تایید را وارد نمایید</p>
<p className='text-[#616161] mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] text-[14px] font-normal text-right'>
کد تایید برای شماره 09013261200 ارسال شد.
</p>
<div className='mt-[26px] sm:mt-[28px] md:mt-[30px] lg:mt-[32px] mb-[56px] sm:mb-[47px] md:mb-[38px] lg:mb-[30px]'>
<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">
return (
<div
className="rounded-[16px] mt-[51px] sm:mt-[45px] md:mt-[39px] lg:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF]
p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px]"
>
<div
className="cursor-pointer"
onClick={() => {
setStep && setStep((prev) => prev - 1);
setIsSendMsg && setIsSendMsg(false);
}}
>
<ArrowRightS />
</div>
<p className="text-[#525252] mt-[10px] sm:mt-[12px] md:mt-[14px] lg:mt-[16px] text-[18px] font-bold">
کد تایید را وارد نمایید
</p>
<p className="text-[#616161] mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] text-[14px] font-normal text-right">
کد تایید برای شماره 09013261200 ارسال شد.
</p>
<div className="mt-[26px] sm:mt-[28px] md:mt-[30px] lg:mt-[32px] mb-[56px] sm:mb-[47px] md:mb-[38px] lg:mb-[30px]">
<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 className='flex w-full items-center justify-between flex-wrap gap-y-5'>
<div className="flex w-full items-center justify-between flex-wrap gap-y-5">
<Button
className="flex !p-1 items-center justify-start gap-1 cursor-pointer"
onClick={() => {
setStep && setStep((prev) => prev - 1);
setIsSendMsg && setIsSendMsg(false);
}}
>
<EditLogin />
<p className="text-[#F17732] text-[14px] font-normal select-none">
ویرایش شماره موبایل
</p>
</Button>
<Button
className='flex !p-1 items-center justify-start gap-1 cursor-pointer'
onClick={() => {
setStep && setStep(prev => prev - 1)
setIsSendMsg && setIsSendMsg(false)
<Button
className="flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer"
// sx={{ '&.MuiButton-root:hover': { bgcolor: 'transparent' } }}
disabled={typeof timer === "number" && timer !== 0}
onClick={() => {
if (!timer && timer !== "loading") {
handleTimer();
}}
>
<EditLogin />
<p className='text-[#F17732] text-[14px] font-normal select-none'>ویرایش شماره موبایل</p>
</Button>
// Rotate Retry Icon
retryIcon.current.classList.add("retry-icon");
<Button
className='flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer'
// sx={{ '&.MuiButton-root:hover': { bgcolor: 'transparent' } }}
disabled={typeof timer === 'number' && timer !== 0}
onClick={() => {
if (!timer && timer !== 'loading') {
handleTimer();
// Rotate Retry Icon
retryIcon.current.classList.add('retry-icon');
// Remove Style Rotate Icon
setTimeout(() => {
retryIcon.current &&
retryIcon.current.classList.remove('retry-icon');
}, 1000);
}
}}
>
{timer && (timer !== 'loading') ? (
<p className='text-[#F17732] text-[14px] font-normal select-none'>{timer} ثانیه</p>
) : (
<>
<div ref={retryIcon}>
<RetryLogin />
</div>
<p className='text-[#F17732] text-[14px] font-normal select-none'>دریافت مجدد کد</p>
</>
)}
</Button>
// Remove Style Rotate Icon
setTimeout(() => {
retryIcon.current &&
retryIcon.current.classList.remove("retry-icon");
}, 1000);
}
}}
>
{timer && timer !== "loading" ? (
<p className="text-[#F17732] text-[14px] font-normal select-none">
{timer} ثانیه
</p>
) : (
<>
<div ref={retryIcon}>
<RetryLogin />
</div>
</div>
<Link
href={link || ''}
onClick={e => !link && e.preventDefault()}
>
<Button
fullWidth
variant='contained'
onClick={() => {
setIsSendMsg && setIsSendMsg(true)
setStep && setStep(prev => prev + 1)
}}
className='!rounded-[8px] !bg-[#5559CE]'
>تایید</Button>
</Link>
<p className="text-[#F17732] text-[14px] font-normal select-none">
دریافت مجدد کد
</p>
</>
)}
</Button>
</div>
)
</div>
<Link href={link || ""} onClick={(e) => !link && e.preventDefault()}>
<Button
fullWidth
variant="contained"
onClick={() => {
setIsSendMsg && setIsSendMsg(true);
setStep && setStep((prev) => prev + 1);
}}
className="!rounded-[8px] !bg-[#5559CE]"
>
تایید
</Button>
</Link>
</div>
);
}
export default SetCodePage
export default SetCodePage;