feat(i18n): localize home page

bas-kirill · Aug 30, 2024 · 89fb737 · 89fb737
1 parent 51d6e7c
commit 89fb737
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 27 deletions.
diff --git a/client/src/i18n.ts b/client/src/i18n.ts
@@ -1,6 +1,17 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 
+export const I18N_HOME_SEARCH_BAR_INPUT = "home.searchbar.input";
+export const I18N_HOME_SEARCH_BAR_BUTTON = "home.searchbar.button";
+
+export const I18N_REASONS_H1 = "home.reasons.h1";
+
+export const I18N_REASONS_FIRST = "home.reasons.first";
+export const I18N_REASONS_SECOND = "home.reasons.second";
+export const I18N_REASONS_THIRD = "home.reasons.third";
+
+export const I18N_TRENDS_H1 = "home.trends.h1";
+
 export const I18N_INSTRUMENT_TYPE_FILTER = "instrument.type.filter";
 export const I18N_INSTRUMENT_CARD_MANUFACTURER = "instrument.card.manufacturer";
 export const I18N_MANUFACTURER_DATE =
@@ -14,28 +25,42 @@ export const I18N_INSTRUMENT_DATE_TO = "instrument.date.to";
 const resources = {
   en: {
     translation: {
+      [I18N_HOME_SEARCH_BAR_INPUT]: "What instrument?",
+      [I18N_HOME_SEARCH_BAR_BUTTON]: "Search",
+      [I18N_REASONS_H1]: "Why Choose Us for Your Musical Needs",
+      [I18N_REASONS_FIRST]: "We offer a wide range of high-quality instruments for all skill levels",
+      [I18N_REASONS_SECOND]: "Our expert staff provides personalized advice and service",
+      [I18N_REASONS_THIRD]: "Enjoy competitive prices and exclusive deals on top brands",
+      [I18N_TRENDS_H1]: "Trending Instruments",
       [I18N_INSTRUMENT_TYPE_FILTER]: "Type",
       [I18N_INSTRUMENT_CARD_MANUFACTURER]: "Manufacturer",
       [I18N_MANUFACTURER_DATE]: "Manufacturer Date",
       [I18N_RELEASE_DATE]: "Release Date",
       [I18N_COUNTRY]: "Country",
       [I18N_INSTRUMENT_BASIC_MATERIALS]: "Basic Materials",
       [I18N_INSTRUMENT_DATE_FROM]: "From",
-      [I18N_INSTRUMENT_DATE_TO]: "To",
-    },
+      [I18N_INSTRUMENT_DATE_TO]: "To"
+    }
   },
   ru: {
     translation: {
+      [I18N_HOME_SEARCH_BAR_INPUT]: "Какой инструмент?",
+      [I18N_HOME_SEARCH_BAR_BUTTON]: "Поиск",
+      [I18N_REASONS_H1]: "Почему вы выберете нас",
+      [I18N_REASONS_FIRST]: "Мы предлагаем широкий ассортимент высококачественных инструментов для всех уровней квалификации",
+      [I18N_REASONS_SECOND]: "Наш квалифицированный персонал предоставляет индивидуальные консультации и обслуживание",
+      [I18N_REASONS_THIRD]: "Наслаждайтесь конкурентоспособными ценами и эксклюзивными предложениями от ведущих брендов",
+      [I18N_TRENDS_H1]: "Тренды",
       [I18N_INSTRUMENT_TYPE_FILTER]: "Тип",
       [I18N_INSTRUMENT_CARD_MANUFACTURER]: "Производитель",
       [I18N_MANUFACTURER_DATE]: "Дата производства",
       [I18N_RELEASE_DATE]: "Дата выпуска",
       [I18N_COUNTRY]: "Страна",
       [I18N_INSTRUMENT_BASIC_MATERIALS]: "Основные материалы",
       [I18N_INSTRUMENT_DATE_FROM]: "С",
-      [I18N_INSTRUMENT_DATE_TO]: "По",
-    },
-  },
+      [I18N_INSTRUMENT_DATE_TO]: "По"
+    }
+  }
 };
 
 i18n
@@ -44,8 +69,8 @@ i18n
     resources,
     lng: window.navigator.language,
     interpolation: {
-      escapeValue: false, // react already safes from xss
-    },
+      escapeValue: false // react already safes from xss
+    }
   });
 
 export default i18n;
diff --git a/client/src/pages/home/ui/Home.page.tsx b/client/src/pages/home/ui/Home.page.tsx
@@ -11,44 +11,52 @@ import rock_guitar from "pages/home/ui/images/rock_guitar.webp";
 import violin from "pages/home/ui/images/violin.webp";
 import homeLogo from "pages/home/ui/images/home-logo.webp";
 import { useDarkMode } from "shared/dark-mode/use-dark-mode";
+import { useTranslation } from "react-i18next";
+import {
+  I18N_HOME_SEARCH_BAR_BUTTON,
+  I18N_HOME_SEARCH_BAR_INPUT,
+  I18N_REASONS_FIRST,
+  I18N_REASONS_H1, I18N_REASONS_SECOND, I18N_REASONS_THIRD, I18N_TRENDS_H1
+} from "../../../i18n";
 
 const images = [
   {
     image: saxophone,
-    caption: "Saxophone",
+    caption: "Saxophone"
   },
   {
     image: guitar,
-    caption: "Guitar",
+    caption: "Guitar"
   },
   {
     image: rock_guitar,
-    caption: "Rock Guitar",
+    caption: "Rock Guitar"
   },
   {
     image: violin,
-    caption: "Violin",
-  },
+    caption: "Violin"
+  }
 ];
 
 const trendingInstrumentsResponsiveSettings = [
   {
     breakpoint: 571,
     settings: {
       slidesToShow: 3,
-      slidesToScroll: 1,
-    },
+      slidesToScroll: 1
+    }
   },
   {
     breakpoint: 570,
     settings: {
       slidesToShow: 1,
-      slidesToScroll: 1,
-    },
-  },
+      slidesToScroll: 1
+    }
+  }
 ];
 
 export function HomePage() {
+  const { t } = useTranslation();
   const { darkMode } = useDarkMode();
 
   return (
@@ -58,20 +66,20 @@ export function HomePage() {
       <div
         className={styles.home_logo}
         style={{
-          background: `url(${homeLogo}) no-repeat center, linear-gradient(blue, cyan)`,
+          background: `url(${homeLogo}) no-repeat center, linear-gradient(blue, cyan)`
         }}
       >
         <form
           className={`${styles.search_bar__form} ${darkMode && darkStyles.text_dark_mode}`}
         >
           <input
             type="text"
-            placeholder="What instrument?"
+            placeholder={t(I18N_HOME_SEARCH_BAR_INPUT)}
             className={`${styles.search_bar__form__input__text}`}
           />
           <input
             type="submit"
-            value="Search"
+            value={t(I18N_HOME_SEARCH_BAR_BUTTON)}
             className={`${styles.search_bar__form__input__submit}`}
           />
         </form>
@@ -80,23 +88,21 @@ export function HomePage() {
       <h1
         className={`${darkMode ? styles.reason__h1__dark_mode : styles.reason__h1}`}
       >
-        Why Choose Us for Your Musical Needs
+        {t(I18N_REASONS_H1)}
       </h1>
 
       <div
         className={`${styles.reasons} ${darkMode && darkStyles.text_dark_mode}`}
       >
-        <div>
-          We offer a wide range of high-quality instruments for all skill levels
-        </div>
-        <div>Our expert staff provides personalized advice and service</div>
-        <div>Enjoy competitive prices and exclusive deals on top brands</div>
+        <div>{t(I18N_REASONS_FIRST)}</div>
+        <div>{t(I18N_REASONS_SECOND)}</div>
+        <div>{t(I18N_REASONS_THIRD)}</div>
       </div>
 
       <h1
         className={`${styles.trends__h1} ${darkMode && darkStyles.text_dark_mode}`}
       >
-        Trending Instruments
+        {t(I18N_TRENDS_H1)}
       </h1>
 
       <div className={styles.trends__slider}>