improve: overall ux in auth page

src/features/auth/components/StepEnterOtp.tsx

@@ -1,6 +1,7 @@
 import Button from '@/components/button/PrimaryButton';
 import OTPInputField from '@/components/input/MultiInputField';
 import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
+import clsx from 'clsx';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react'
 
@@ -11,9 +12,10 @@ type Props = {
     phoneNumber: string;
     timerRunning: boolean;
     secondsLeft: number;
+    pending?: boolean | undefined
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
 
-function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
+function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
     const [error, setError] = useState('');
 
     const hasError = (e = error) => {
@@ -37,7 +39,8 @@ function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber,
                 alt='login banner'
                 width={100}
                 height={100}
-                unoptimized={true}
+                unoptimized
+                priority
             />
             <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
                 <div className='pt-4' dir='rtl'>
@@ -60,22 +63,27 @@ function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber,
                         onChange={onChange} />
                 </div>
 
-                <div className='inline-flex justify-center items-center w-full pt-6 text-xs'>
+                <div className='text-center w-full pt-6 text-xs'>
                     <div dir='rtl'>
                         {timerRunning ?
                             <div>{secondsLeft} ثانیه دیگر تا دریافت کد</div> :
                             <div>
                                 کد را دریافت نکردید؟
-                                <span className='text-primary px-1'>
-                                    <button type='button' id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='cursor-pointer' onClick={onClick}>
-                                        دوباره امتحان کنید
-                                    </button>
-                                </span>
+                                <button
+                                    type='button'
+                                    disabled={pending}
+                                    id={AUTH_PAGE_ELEMENTS.RESEND_OTP}
+                                    className={clsx(
+                                        'px-1 transition-colors duration-200',
+                                        !pending ? 'text-primary cursor-pointer' : 'text-neutral-200 cursor-auto'
+                                    )} onClick={onClick}>
+                                    دوباره امتحان کنید
+                                </button>
                             </div>
                         }
                     </div>
                 </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} type='submit'>بعدی</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>بعدی</Button>
             </div>
         </>
     )