fix: style issue after modifications

2025-08-21 18:30:01 +03:30
parent d30e6ac209
commit 3cb48023b6
4 changed files with 431 additions and 314 deletions
@@ -1,71 +1,78 @@
-'use client';
+'use client'

-import Button from '@/components/button/PrimaryButton';
-import InputField from '@/components/input/InputField';
-import { AUTH_PAGE_ELEMENT } from '@/enums';
-import Image from 'next/image';
+import Button from '@/components/button/PrimaryButton'
+import InputField from '@/components/input/InputField'
+import { AUTH_PAGE_ELEMENT } from '@/enums'
+import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'

 type Props = {
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    value: string;
-    pending?: boolean | undefined
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  value: string
+  pending?: boolean | undefined
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>

-function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
-    const [error, setError] = useState('');
-    const { t } = useTranslation('auth');
+function StepEnterNumber ({ onChange, pending, disabled, value }: Props) {
+  const [error, setError] = useState('')
+  const { t } = useTranslation('auth')

-    const hasError = (e = error) => {
-        return e.trim().length > 0
+  const hasError = (e = error) => {
+    return e.trim().length > 0
+  }
+
+  useEffect(() => {
+    let error = ''
+    if (value.length > 0) {
+      if (!/^09\d{7,9}$/.test(value)) {
+        error = t('Errors.PhoneNumberFormat')
+      }
    }

-    useEffect(() => {
-        let error = '';
-        if (value.length > 0) {
-            if (!/^09\d{7,9}$/.test(value)) {
-                error = t('Errors.PhoneNumberFormat');
-            }
-        }
+    setError(error)
+  }, [t, value])

-        setError(error);
-    }, [t, value])
-
-    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'>
-                        <h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
-                        <p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
-                    </div>
-                    <InputField
-                        valid={!hasError()}
-                        aria-errormessage={error}
-                        inputMode='tel'
-                        autoComplete='tel'
-                        className='mt-10 w-full'
-                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
-                        labelText={t('Enter.LabelPhoneNumber')}
-                        value={value}
-                        placeholder='09120000000'
-                        onChange={onChange}
-                        type='number' />
-                </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('Enter.ButtonSubmit')}</Button>
-            </div>
-        </>
-    )
+  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'>
+            <h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
+            <p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
+          </div>
+          <InputField
+            valid={!hasError()}
+            aria-errormessage={error}
+            inputMode='tel'
+            autoComplete='tel'
+            className='mt-10 w-full bg-container'
+            htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
+            labelText={t('Enter.LabelPhoneNumber')}
+            value={value}
+            placeholder='09120000000'
+            onChange={onChange}
+            type='number'
+          />
+        </div>
+        <Button
+          disabled={disabled || hasError() || value.length <= 0}
+          pending={pending}
+          type='submit'
+        >
+          {t('Enter.ButtonSubmit')}
+        </Button>
+      </div>
+    </>
+  )
 }

-export default StepEnterNumber
+export default StepEnterNumber