fix combo box in glass

src/features/auth/components/StepEnterNumber.tsx

@@ -1,127 +1,112 @@
-'use client'
+"use client";
 
-import Button from '@/components/button/PrimaryButton'
-import InputField from '@/components/input/InputField'
-import { AUTH_PAGE_ELEMENT, AUTH_STEP } from '@/enums'
-import { LoginOTPRequestType } from '@/app/auth/login/types/Types'
-import Image from 'next/image'
-import React, { useState } from 'react'
-import type { ChangeEvent } from 'react'
-import { useTranslation } from 'react-i18next'
-import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
-import { useOtpRequest } from '@/app/auth/login/hooks/useAuthData'
-import { useParams } from 'next/navigation'
-import { toast } from '@/components/Toast'
-import StepOtp from './StepOtp'
-import { extractErrorMessage } from '@/lib/func'
-import { useCountdown } from '@/hooks/useCountdown'
+import { useOtpRequest } from "@/app/auth/login/hooks/useAuthData";
+import { LoginOTPRequestType } from "@/app/auth/login/types/Types";
+import Button from "@/components/button/PrimaryButton";
+import InputField from "@/components/input/InputField";
+import { toast } from "@/components/Toast";
+import { AUTH_PAGE_ELEMENT, AUTH_STEP } from "@/enums";
+import { useCountdown } from "@/hooks/useCountdown";
+import { extractErrorMessage } from "@/lib/func";
+import { glassSurfaceFlat } from "@/lib/styles/glassSurface";
+import { useFormik } from "formik";
+import Image from "next/image";
+import { useParams } from "next/navigation";
+import type { ChangeEvent } from "react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import * as Yup from "yup";
+import StepOtp from "./StepOtp";
 
 type StepEnterNumberProps = {
-  pending?: boolean
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
-  value?: string
-}
+  pending?: boolean;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  value?: string;
+};
 
 function StepEnterNumber(_props: StepEnterNumberProps = {}) {
-  void _props
-
-  const { t } = useTranslation('auth')
-  const { name } = useParams()
-  const [step, setStep] = useState(AUTH_STEP.ENTER_NUMBER)
-  const { mutate: mutateOtpRequest, isPending } = useOtpRequest()
-  const { timerRunning, secondsLeft, restart } = useCountdown(
-    step === AUTH_STEP.ENTER_OTP,
-    120
-  )
+  void _props;
 
+  const { t } = useTranslation("auth");
+  const { name } = useParams();
+  const [step, setStep] = useState(AUTH_STEP.ENTER_NUMBER);
+  const { mutate: mutateOtpRequest, isPending } = useOtpRequest();
+  const { timerRunning, secondsLeft, restart } = useCountdown(step === AUTH_STEP.ENTER_OTP, 120);
 
   const formik = useFormik<LoginOTPRequestType>({
     initialValues: {
-      phone: '',
-      slug: '',
+      phone: "",
+      slug: "",
     },
     validationSchema: Yup.object({
-      phone: Yup.string().required('Errors.PhoneNumberRequired').matches(/^09\d{9}$/, 'Errors.PhoneNumberFormat'),
+      phone: Yup.string()
+        .required("Errors.PhoneNumberRequired")
+        .matches(/^09\d{9}$/, "Errors.PhoneNumberFormat"),
     }),
     onSubmit: (values) => {
       if (name) {
-        values.slug = name as string
+        values.slug = name as string;
         mutateOtpRequest(values, {
           onSuccess: () => {
-            toast(t('otp_sent'), 'success')
-            setStep(AUTH_STEP.ENTER_OTP)
+            toast(t("otp_sent"), "success");
+            setStep(AUTH_STEP.ENTER_OTP);
           },
           onError: (error) => {
-            toast(extractErrorMessage(error), 'error')
-
-          }
-        })
+            toast(extractErrorMessage(error), "error");
+          },
+        });
       }
-    }
-  })
+    },
+  });
 
   const handleResendOtp = () => {
-    if (timerRunning || !name) return
+    if (timerRunning || !name) return;
 
     mutateOtpRequest(
       { phone: formik.values.phone, slug: name as string },
       {
         onSuccess: () => {
-          toast(t('otp_sent'), 'success')
-          restart()
+          toast(t("otp_sent"), "success");
+          restart();
         },
         onError: (error) => {
-          toast(extractErrorMessage(error), 'error')
+          toast(extractErrorMessage(error), "error");
         },
-      }
-    )
-  }
+      },
+    );
+  };
 
   return (
     <>
-      <Image
-        className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
-        src={'/assets/images/login-banner.png'}
-        alt='login banner'
-        width={100}
-        height={100}
-        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='w-full'>
-          <div className='pt-4'>
-            {
-              step === AUTH_STEP.ENTER_NUMBER && (
-                <>
-                  <h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
-                  <p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
-                </>
-              )
-            }
-            {
-              step === AUTH_STEP.ENTER_OTP && (
-                <>
-                  <h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6>
-                  <p className='mt-3 text-[13px]'>{t('OTP.Description', { phoneNumber: formik.values.phone })}</p>
-                </>
-              )
-            }
+      <Image className="object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2" src={"/assets/images/login-banner.png"} alt="login banner" width={100} height={100} 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="w-full">
+          <div className="pt-4">
+            {step === AUTH_STEP.ENTER_NUMBER && (
+              <>
+                <h6 className="text-lg font-bold">{t("Enter.Heading")}</h6>
+                <p className="mt-3 text-[13px]">{t("Enter.Description")}</p>
+              </>
+            )}
+            {step === AUTH_STEP.ENTER_OTP && (
+              <>
+                <h6 className="text-lg font-bold">{t("OTP.Heading")}</h6>
+                <p className="mt-3 text-[13px]">{t("OTP.Description", { phoneNumber: formik.values.phone })}</p>
+              </>
+            )}
           </div>
           {step === AUTH_STEP.ENTER_NUMBER && (
             <InputField
-              type='tel'
-              inputMode='tel'
-              autoComplete='tel'
-              dir='ltr'
-              className={glassSurfaceFlat('mt-10 w-full')}
-              inputClassName='text-left dltr'
+              type="tel"
+              inputMode="tel"
+              autoComplete="tel"
+              dir="ltr"
+              className={glassSurfaceFlat("mt-10 w-full")}
+              inputClassName="text-left dltr"
               htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
-              labelText={t('Enter.LabelPhoneNumber')}
-              {...formik.getFieldProps('phone')}
-              placeholder='09120000000'
+              labelText={t("Enter.LabelPhoneNumber")}
+              {...formik.getFieldProps("phone")}
+              placeholder="09120000000"
             />
           )}
           {step === AUTH_STEP.ENTER_OTP && (
@@ -135,22 +120,14 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
             />
           )}
         </div>
-        {
-          step === AUTH_STEP.ENTER_NUMBER && (
-            <Button
-              disabled={!formik.isValid}
-              pending={isPending}
-              type='button'
-              onClick={() => formik.handleSubmit()}
-              className='dark:bg-white dark:text-black hover:dark:bg-white'
-            >
-              {t('Enter.ButtonSubmit')}
-            </Button>
-          )
-        }
+        {step === AUTH_STEP.ENTER_NUMBER && (
+          <Button disabled={!formik.isValid} pending={isPending} type="button" onClick={() => formik.handleSubmit()} className="dark:bg-white dark:text-black hover:dark:bg-white">
+            {t("Enter.ButtonSubmit")}
+          </Button>
+        )}
       </div>
     </>
-  )
+  );
 }
 
-export default StepEnterNumber
+export default StepEnterNumber;