translation added

src/features/auth/login/ui/form.tsx

@@ -11,9 +11,12 @@ import { MotionWrapper } from '../../../../shared/ui/motion';
 import { useLoginForm } from '../lib/useLoginForm';
 import { useLoginModal } from '@/shared/zustand/auth';
 import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 
 export function LoginForm() {
   const [isFocused, setIsFocused] = useState(false);
+  const t = useTranslations('Auth.Login');
+  const tCommon = useTranslations('Common');
 
   const { phone, setPhone, submit, error, loading } = useLoginForm();
   const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
@@ -49,14 +52,12 @@ export function LoginForm() {
 
             {/* Header */}
             <p className="mb-1 text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-stone-400">
-              Xush kelibsiz
+              {t('welcome')}
             </p>
             <h1 className="mb-1 font-serif text-3xl leading-tight text-stone-900">
-              Kirish
+              {t('title')}
             </h1>
-            <p className="mb-8 text-sm text-stone-400">
-              Telefon raqamingizni kiriting.
-            </p>
+            <p className="mb-8 text-sm text-stone-400">{t('description')}</p>
 
             <form onSubmit={submit} noValidate className="flex flex-col gap-5">
               {/* Phone field */}
@@ -65,7 +66,7 @@ export function LoginForm() {
                   htmlFor="phone"
                   className="text-[0.7rem] font-medium tracking-widest uppercase text-stone-500"
                 >
-                  Telefon raqam
+                  {t('phoneLabel')}
                 </label>
 
                 <div
@@ -75,7 +76,7 @@ export function LoginForm() {
                   <input
                     id="phone"
                     type="tel"
-                    placeholder="90 123 45 67"
+                    placeholder={t('phonePlaceholder')}
                     value={formatPhone(phone)}
                     onChange={handlePhoneChange}
                     onFocus={() => setIsFocused(true)}
@@ -98,11 +99,12 @@ export function LoginForm() {
                 {/* Digit counter / complete hint */}
                 <div className="flex items-center justify-between px-0.5">
                   <span className="text-[0.7rem] text-stone-400">
-                    {phone.length > 0 && `${phone.length} ta raqam kiritildi`}
+                    {phone.length > 0 &&
+                      t('digitsEntered', { count: phone.length })}
                   </span>
                   {phone.length === 9 && (
                     <span className="text-[0.7rem] font-medium text-emerald-600">
-                      ✓ To&lsquo;liq
+                      {tCommon('complete')}
                     </span>
                   )}
                 </div>
@@ -130,10 +132,10 @@ export function LoginForm() {
                 {loading ? (
                   <span className="flex items-center justify-center gap-2">
                     <span className="h-3.5 w-3.5 rounded-full border-2 border-stone-500 border-t-stone-100 animate-spin" />
-                    Yuborilmoqda…
+                    {t('sending')}
                   </span>
                 ) : (
-                  'Kodni yuborish'
+                  t('sendCode')
                 )}
               </button>
 
@@ -141,19 +143,19 @@ export function LoginForm() {
               <div className="relative flex items-center gap-3 py-1">
                 <span className="h-px flex-1 bg-stone-200" />
                 <span className="text-[0.65rem] font-medium uppercase tracking-widest text-stone-400">
-                  yoki
+                  {tCommon('or')}
                 </span>
                 <span className="h-px flex-1 bg-stone-200" />
               </div>
 
               {/* Register hint */}
               <p className="text-center text-[0.78rem] text-stone-400">
-                Hisobingiz yo&lsquo;qmi?
+                {t('registerPrompt')}
                 <Link
                   href="/register"
                   className="text-stone-800 underline underline-offset-2 hover:text-stone-600 transition-colors"
                 >
-                  Ro&lsquo;yxatdan o&lsquo;tish
+                  {t('registerLink')}
                 </Link>
               </p>
             </form>