fix: fix login-page errors

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

@@ -98,9 +98,7 @@ export const LoginForm = ({ type }: LoginFormProps) => {
           type='submit'
           className='w-full'
           disabled={isLoginLoading}
-        >
-          Войти
-        </SubmitButton>
+        />
       </form>
     </Form>
   );

src/pages-templates/login/index.tsx

@@ -1,11 +1,11 @@
-"use client"
+'use client';
 
 import { Building2, Fuel, User } from 'lucide-react';
 import Link from 'next/link';
 
 import { LoginForm } from '@/features/auth/login-form';
-import { useLanguage } from '@/shared/language';
 
+import { useLanguage } from '@/shared/language';
 import {
   Card,
   CardContent,
@@ -20,6 +20,23 @@ import {
   TabsTrigger,
 } from '@/shared/shadcn-ui/tabs';
 
+const tabs = [
+  {
+    label: 'auth.bonusClient',
+    type: 'bonus' as const,
+    title: 'auth.bonusLogin.title',
+    description: 'auth.bonusLogin.description',
+    Icon: User,
+  },
+  {
+    label: 'auth.corporateClient',
+    type: 'corporate' as const,
+    title: 'auth.corporateLogin.title',
+    description: 'auth.corporateLogin.description',
+    Icon: Building2,
+  },
+];
+
 export default function LoginPage() {
   const { t } = useLanguage();
 
@@ -34,49 +51,40 @@ export default function LoginPage() {
             <h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
               {t('auth.title')}
             </h1>
-            <p className='max-w-2xl text-gray-600'>
-              {t('auth.description')}
-            </p>
+            <p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
           </div>
 
-          <div className='mx-auto max-w-md'>
+          <div className='mx-auto max-w-lg'>
             <Tabs defaultValue='bonus' className='w-full'>
-              <TabsList className='mb-8 grid w-full grid-cols-2'>
-                <TabsTrigger value='bonus' className='text-base'>
-                  <User className='mr-2 h-4 w-4' /> {t('auth.bonusClient')}
-                </TabsTrigger>
-                <TabsTrigger value='corporate' className='text-base'>
-                  <Building2 className='mr-2 h-4 w-4' /> {t('auth.corporateClient')}
-                </TabsTrigger>
+              <TabsList className='mb-8 flex h-fit w-full flex-col sm:flex-row'>
+                {tabs.map((tab) => {
+                  return (
+                    <TabsTrigger
+                      key={tab.label}
+                      value={tab.type}
+                      className='w-full text-base'
+                    >
+                      <tab.Icon className='mr-2 h-4 w-4' /> {t(tab.label)}
+                    </TabsTrigger>
+                  );
+                })}
               </TabsList>
 
-              <TabsContent value='bonus'>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('auth.bonusLogin.title')}</CardTitle>
-                    <CardDescription>
-                      {t('auth.bonusLogin.description')}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className='space-y-4'>
-                    <LoginForm />
-                  </CardContent>
-                </Card>
-              </TabsContent>
-
-              <TabsContent value='corporate'>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('auth.corporateLogin.title')}</CardTitle>
-                    <CardDescription>
-                      {t('auth.corporateLogin.description')}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className='space-y-4'>
-                    <LoginForm/>
-                  </CardContent>
-                </Card>
-              </TabsContent>
+              {tabs.map((tab) => {
+                return (
+                  <TabsContent key={tab.label} value={tab.type}>
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>{t(tab.title)}</CardTitle>
+                        <CardDescription>{t(tab.description)}</CardDescription>
+                      </CardHeader>
+                      <CardContent className='space-y-4'>
+                        <LoginForm type={tab.type} />
+                      </CardContent>
+                    </Card>
+                  </TabsContent>
+                );
+              })}
             </Tabs>
 
             <div className='mt-8 text-center text-sm text-gray-500'>
@@ -92,4 +100,4 @@ export default function LoginPage() {
       </main>
     </div>
   );
-}
+}

src/shared/components/submit-button.tsx

@@ -1,14 +1,18 @@
+'use client';
+
 import { Loader2Icon } from 'lucide-react';
 
 import { Button, type ButtonProps } from '@/shared/shadcn-ui/button';
 
+import { useLanguage } from '../language';
+
 interface SubmitButtonProps extends ButtonProps {
   title?: string;
   isLoading: boolean;
 }
 
 export const SubmitButton = ({
-  title = 'Отправить',
+  title = 'common.buttons.login',
   size = 'default',
   type = 'submit',
   className,
@@ -17,6 +21,8 @@ export const SubmitButton = ({
   onClick,
   ...props
 }: SubmitButtonProps) => {
+  const { t } = useLanguage();
+
   return (
     <Button
       onClick={onClick}
@@ -29,7 +35,7 @@ export const SubmitButton = ({
       {isLoading ? (
         <Loader2Icon className='animate-spin' />
       ) : (
-        (props.children ?? title)
+        (props.children ?? t(title))
       )}
     </Button>
   );