fix responsive all page & add modal doctor id & page dashboard aside

components/register/SetCodePage.js

@@ -1,11 +1,34 @@
-import { Button } from "@mui/material"
-import ArrowRightS from "../icons/ArrowRightS"
-import OTPForm from "./element/OTPForm"
-import ArrowLeftOrangeS from "../icons/ArrowLeftOrangeS"
-import Link from "next/link"
+import { useRef, useState } from "react"
+
+import Link from "next/link";
+import { Button } from "@mui/material";
+import OTPForm from "./element/OTPForm";
+import EditLogin from "../icons/EditLogin";
+import RetryLogin from "../icons/RetryLogin";
+import ArrowRightS from "../icons/ArrowRightS";
+
+const time_resend_code = 120;
 
 function SetCodePage({ setIsSendMsg, link }) {
 
+    const retryIcon = useRef();
+
+    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);
+
+                !timePresent && clearInterval(timerInterval)
+            }, 1000);
+        }, 1000);
+    }
+
     const handleOTP = (e) => {
         e.target.nextElementSibling &&
             e.target.nextElementSibling.focus()
@@ -32,10 +55,51 @@ function SetCodePage({ setIsSendMsg, link }) {
                     <OTPForm handleOTP={handleOTP} />
                     <OTPForm handleOTP={handleOTP} />
                 </div>
-                <Button className="flex items-center justify-start gap-1">
+                {/* <Button className="flex items-center justify-start gap-1">
                     <p className="text-[#F17732] text-[14px] font-medium">دریافت مجدد کد تایید</p>
                     <ArrowLeftOrangeS />
-                </Button>
+                </Button> */}
+                <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={() => 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 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>
+                </div>
             </div>
             <Link href={link}>
                 <Button