page set code

2024-06-24 03:56:29 +03:30
parent 2e561762fa
commit 4fbef73d00
6 changed files with 106 additions and 12 deletions
@@ -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