feat(i18n): localize navbar widget

bas-kirill · Aug 30, 2024 · b18233c · b18233c
1 parent e31becf
commit b18233c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/client/src/i18n.ts b/client/src/i18n.ts
@@ -28,8 +28,13 @@ export const I18N_INSTRUMENT_BASIC_MATERIALS = "instrument.basic.materials";
 export const I18N_INSTRUMENT_DATE_FROM = "instrument.date.from";
 export const I18N_INSTRUMENT_DATE_TO = "instrument.date.to";
 
+export const I18N_INSTRUMENT_CARD_SHOW_BUTTON = "instrument.card.show.button";
+
 export const I18N_FOOTER = "footer";
 
+export const I18N_NAVBAR_PREVIOUS = "navbar.previous";
+export const I18N_NAVBAR_NEXT = "navbar.next";
+
 const resources = {
   en: {
     translation: {
@@ -55,7 +60,12 @@ const resources = {
       [I18N_INSTRUMENT_DATE_FROM]: "From",
       [I18N_INSTRUMENT_DATE_TO]: "To",
 
+      [I18N_INSTRUMENT_CARD_SHOW_BUTTON]: "Show",
+
       [I18N_FOOTER]: "Muse Group Frontend Academy",
+
+      [I18N_NAVBAR_PREVIOUS]: "Previous",
+      [I18N_NAVBAR_NEXT]: "Next",
     }
   },
   ru: {
@@ -81,6 +91,11 @@ const resources = {
       [I18N_INSTRUMENT_BASIC_MATERIALS]: "Основные материалы",
       [I18N_INSTRUMENT_DATE_FROM]: "С",
       [I18N_INSTRUMENT_DATE_TO]: "По",
+
+      [I18N_INSTRUMENT_CARD_SHOW_BUTTON]: "Показать",
+
+      [I18N_NAVBAR_PREVIOUS]: "Предыдущий",
+      [I18N_NAVBAR_NEXT]: "Следующий",
     }
   }
 };

diff --git a/client/src/widgets/catalogue-navbar/ui/NavigationBar.widget.tsx b/client/src/widgets/catalogue-navbar/ui/NavigationBar.widget.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import styles from "./styles/NavigationBar.widget.module.css";
 import { useDarkMode } from "shared/dark-mode/use-dark-mode";
+import { useTranslation } from "react-i18next";
+import { I18N_NAVBAR_NEXT, I18N_NAVBAR_PREVIOUS } from "../../../i18n";
 
 interface Props {
   totalPages: number;
@@ -9,6 +11,7 @@ interface Props {
 }
 
 export const NavigationBarWidget = (props: Props) => {
+  const { t } = useTranslation();
   const { darkMode } = useDarkMode();
 
   return (
@@ -25,7 +28,7 @@ export const NavigationBarWidget = (props: Props) => {
         `}
         onClick={() => props.setPageNumber(Math.max(1, props.pageNumber - 1))}
       >
-        Previous
+        {t(I18N_NAVBAR_PREVIOUS)}
       </button>
 
       <button
@@ -37,7 +40,7 @@ export const NavigationBarWidget = (props: Props) => {
           props.setPageNumber(Math.min(props.pageNumber + 1, props.totalPages))
         }
       >
-        Next
+        {t(I18N_NAVBAR_NEXT)}
       </button>
     </div>
   );