add translation

SecurityQQ · Jun 23, 2024 · 2f555ca · 2f555ca
1 parent 1e5c902
commit 2f555ca
Show file tree

Hide file tree

Showing 19 changed files with 616 additions and 142 deletions.
diff --git a/next-i18next.config.js b/next-i18next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  locales: ['en', 'ru'],
+  defaultLocale: 'ru',
+  localeDetection: false,
+};
diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,6 @@
+// next.config.js
+const { i18n } = require('./next-i18next.config.js');
+
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
   openAnalyzer: true,
@@ -6,6 +9,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  i18n,
   async rewrites() {
     return [
       {

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "jsrsasign-util": "^1.0.5",
     "lucide-react": "^0.390.0",
     "next": "latest",
+    "next-intl": "^3.15.2",
     "node-fetch": "^3.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import React, { useState, useEffect, useLayoutEffect } from 'react';
 
 import Loader from '@/components/Loader';
@@ -39,6 +40,7 @@ const Calendar: React.FC<CalendarProps> = ({
   const [changes, setChanges] = useState<{ date: Date; action: 'add' | 'delete' }[]>([]);
   const [firstDayOfLastPeriod, setFirstDayOfLastPeriod] = useState<Date | null>(null);
   const today = new Date();
+  const t = useTranslations('calendar');
 
   useEffect(() => {
     const initialMonths = [];
@@ -98,21 +100,29 @@ const Calendar: React.FC<CalendarProps> = ({
     }
   };
 
-  const weekDays = ['П', 'В', 'С', 'Ч', 'П', 'С', 'В'];
+  const weekDays = [
+    t('week_days.0'),
+    t('week_days.1'),
+    t('week_days.2'),
+    t('week_days.3'),
+    t('week_days.4'),
+    t('week_days.5'),
+    t('week_days.6'),
+  ];
 
   const monthNames = [
-    'Январь',
-    'Февраль',
-    'Март',
-    'Апрель',
-    'Май',
-    'Июнь',
-    'Июль',
-    'Август',
-    'Сентябрь',
-    'Октябрь',
-    'Ноябрь',
-    'Декабрь',
+    t('month_names.0'),
+    t('month_names.1'),
+    t('month_names.2'),
+    t('month_names.3'),
+    t('month_names.4'),
+    t('month_names.5'),
+    t('month_names.6'),
+    t('month_names.7'),
+    t('month_names.8'),
+    t('month_names.9'),
+    t('month_names.10'),
+    t('month_names.11'),
   ];
 
   const renderCalendar = () => {
@@ -184,25 +194,25 @@ const Calendar: React.FC<CalendarProps> = ({
         </div>
       </div>
 
-      <div className="bg-telegram-bg mt-[56px] flex h-full flex-col items-center gap-2 overflow-y-scroll">
+      <div className="bg-telegram-bg mt-[56px] flex h-full flex-col items-center gap-2 overflow-y-scroll pb-20 pt-4">
         {renderCalendar()}
         {isSaving && <Loader />}
         <div className="fixed bottom-[91px]">
           {isEditing ? (
             <HorizontalButton
               type="blue"
-              leftText="Отмена"
-              rightText="Сохранить"
+              leftText={t('cancel')}
+              rightText={t('save')}
               leftOnClick={handleCancelChanges}
               rightOnClick={handleSaveChanges}
             />
           ) : (
             <Button type={isSaving ? 'ghost' : 'blue'} subtype="primary" onClick={onEdit}>
               {isSaving
                 ? useTon
-                  ? 'Сохраняем данные в блокчейн (до 30 секунд)'
-                  : 'Сохраняем данные'
-                : 'ИЗМЕНИТЬ ДАТЫ МЕСЯЧНЫХ'}
+                  ? t('saving_to_blockchain')
+                  : t('saving_data')
+                : t('edit_period_dates')}
             </Button>
           )}
         </div>
@@ -211,6 +221,6 @@ const Calendar: React.FC<CalendarProps> = ({
   );
 };
 
-// BUGFIX: condition isSaving for button names do not work
-
 export default Calendar;
+
+// BUGFIX: condition isSaving for button names do not work
diff --git a/src/components/Farming.tsx b/src/components/Farming.tsx
@@ -1,5 +1,5 @@
-// components/Farming.tsx
 import { MessageSquareHeart, Rss, UserPlus } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import React, { useEffect, useState } from 'react';
 
 import FarmingTracker from '@/components/ui/FarmingTracker';
@@ -9,46 +9,45 @@ const cardClassName =
   'flex flex-col justify-between items-center p-3 gap-2 bg-[var(--font-dark-secondary)] rounded-[4px] flex-1';
 
 const SubscribeCard: React.FC = () => {
+  const t = useTranslations('farming.subscribe_card');
   return (
     <div className={`${cardClassName} rounded-[4px_4px_4px_20px]`}>
       <Rss className="size-5 text-[var(--font-pink-primary)]" />
       <div className="flex grow flex-col items-center text-center">
         <h4 className="text-base font-extrabold text-[var(--font-dark-primary)] sm:text-sm">
-          +300 HC
+          {t('reward')}
         </h4>
-        <p className="text-sm font-medium text-[var(--font-dark-primary)]">Подписаться на каналы</p>
+        <p className="text-sm font-medium text-[var(--font-dark-primary)]">{t('description')}</p>
       </div>
     </div>
   );
 };
 
 const ShareCard: React.FC = () => {
+  const t = useTranslations('farming.share_card');
   return (
     <div className={cardClassName}>
       <MessageSquareHeart className="size-5 text-[var(--font-blue-primary)]" />
       <div className="flex grow flex-col items-center text-center">
         <h4 className="text-base font-extrabold text-[var(--font-dark-primary)] sm:text-sm">
-          +600 HC
+          {t('reward')}
         </h4>
-        <p className="text-sm font-medium text-[var(--font-dark-primary)]">
-          Рассказать о себе (скоро!)
-        </p>
+        <p className="text-sm font-medium text-[var(--font-dark-primary)]">{t('description')}</p>
       </div>
     </div>
   );
 };
 
 const InviteCard: React.FC = () => {
+  const t = useTranslations('farming.invite_card');
   return (
     <div className={`${cardClassName} rounded-[4px_4px_20px_4px]`}>
       <UserPlus className="size-5 text-[var(--font-orange-primary)]" />
       <div className="flex grow flex-col items-center text-center">
         <h4 className="text-base font-extrabold text-[var(--font-dark-primary)] sm:text-sm">
-          +600 HC
+          {t('reward')}
         </h4>
-        <p className="text-sm font-medium text-[var(--font-dark-primary)]">
-          Пригласить пользователя (скоро!)
-        </p>
+        <p className="text-sm font-medium text-[var(--font-dark-primary)]">{t('description')}</p>
       </div>
     </div>
   );