add: locale and i18n

src/features/auth/components/StepEnterNumber.tsx

@@ -1,8 +1,11 @@
+'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 React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next';
 
 type Props = {
     onChange: React.ChangeEventHandler<HTMLInputElement>;
@@ -12,6 +15,7 @@ type Props = {
 
 function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
     const [error, setError] = useState('');
+    const { t } = useTranslation();
 
     const hasError = (e = error) => {
         return e.trim().length > 0
@@ -21,12 +25,12 @@ function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
         let error = '';
         if (value.length > 0) {
             if (!/^09\d{7,9}$/.test(value)) {
-                error = 'فرمت اشتباه است';
+                error = t('Errors.PhoneNumberFormat');
             }
         }
 
         setError(error);
-    }, [value])
+    }, [t, value])
 
     return (
         <>
@@ -41,9 +45,9 @@ function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
             />
             <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' dir='rtl'>
-                        <h6 className='text-lg font-bold'>ورود به سیستم</h6>
-                        <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
+                    <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()}
@@ -52,13 +56,13 @@ function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
                         autoComplete='tel'
                         className='mt-10 w-full'
                         htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
-                        labelText='شماره همراه'
+                        labelText={t('Enter.LabelPhoneNumber')}
                         value={value}
                         placeholder='09120000000'
                         onChange={onChange}
                         type='number' />
                 </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>بعدی</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('Enter.ButtonSubmit')}</Button>
             </div>
         </>
     )