From 7b1c7e277f5741f26dc1edee513d77e835e79870 Mon Sep 17 00:00:00 2001
From: NazarBaraban <barabannazar44@gmail.com>
Date: Thu, 14 Sep 2023 23:34:15 +0300
Subject: [PATCH 1/7] create localization and first variant of selector

---
 package.json                        |  2 ++
 src/components/Card.tsx             | 18 +++++-----
 src/components/CategoryCard.tsx     |  8 +++--
 src/components/CheckoutModal.tsx    | 12 ++++---
 src/components/Footer.tsx           | 13 ++++---
 src/components/Header.tsx           | 18 ++++++----
 src/components/LanguageSelector.tsx | 54 +++++++++++++++++++++++++++++
 src/index.tsx                       |  1 +
 src/localization/i18n.js            | 29 ++++++++++++++++
 src/localization/locales/en.json    | 54 +++++++++++++++++++++++++++++
 src/localization/locales/ja.json    | 52 +++++++++++++++++++++++++++
 src/localization/locales/uk.json    | 54 +++++++++++++++++++++++++++++
 src/pages/BurgerMenu.tsx            | 10 +++---
 src/pages/CartPage.tsx              | 24 +++++++++----
 src/pages/CatalogPage.tsx           | 46 ++++++++++++------------
 src/pages/ContactsPage.tsx          |  5 ++-
 src/pages/FavouritesPage.tsx        |  8 +++--
 src/pages/HomePage.tsx              | 12 ++++---
 src/pages/NotFoundPage.tsx          | 16 +++++----
 src/pages/ProductPage.tsx           | 26 +++++++-------
 20 files changed, 375 insertions(+), 87 deletions(-)
 create mode 100644 src/components/LanguageSelector.tsx
 create mode 100644 src/localization/i18n.js
 create mode 100644 src/localization/locales/en.json
 create mode 100644 src/localization/locales/ja.json
 create mode 100644 src/localization/locales/uk.json

diff --git a/package.json b/package.json
index 525988e..5b9a0fd 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,11 @@
     "@types/react-dom": "^18.2.7",
     "axios": "^1.5.0",
     "classnames": "^2.3.2",
+    "i18next": "^23.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
+    "react-i18next": "^13.2.2",
     "react-icons": "^4.10.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 87df973..e632995 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,18 +1,19 @@
 import classNames from 'classnames';
 import { useState } from 'react';
-import { FiHeart } from 'react-icons/fi';
+import toast from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
 import { FaHeart } from 'react-icons/fa';
+import { FiHeart } from 'react-icons/fi';
+import { NavLink } from 'react-router-dom';
 import {
   addItemToCart,
-  useAppDispatch,
   toggleFavourite,
+  useAppDispatch,
   useAppSelector,
 } from '../redux';
+import { IProduct } from '../types/Product';
 import { Button } from './Button';
 import { ProductProperties } from './ProductProperties';
-import { IProduct } from '../types/Product';
-import toast from 'react-hot-toast';
-import { NavLink } from 'react-router-dom';
 
 type Props = {
   product: IProduct;
@@ -24,6 +25,7 @@ export const Card = ({ product, isFetching }: Props) => {
   const { items } = useAppSelector((state) => state.cart);
   const dispatch = useAppDispatch();
   const [favorite, setFavorite] = useState(false);
+  const { t } = useTranslation();
 
   const isFavourite = (id: string) =>
     favouriteItems.some((item) => item._id === id);
@@ -52,7 +54,7 @@ export const Card = ({ product, isFetching }: Props) => {
 
   const handleAddToCart = () => {
     if (items.some(({ id }) => id === product._id)) {
-      toast.error('This product is already in your cart');
+      toast.error(t('toTheCartError'));
 
       return;
     }
@@ -69,7 +71,7 @@ export const Card = ({ product, isFetching }: Props) => {
     };
 
     dispatch(addItemToCart(itemData));
-    toast.success('Successfully added to your cart!');
+    toast.success(t('toTheCart'));
   };
 
   return (
@@ -116,7 +118,7 @@ export const Card = ({ product, isFetching }: Props) => {
         <ProductProperties properties={productProps} />
         <div className="flex justify-between gap-x-[8px]">
           <Button onClick={handleAddToCart} outline={!!isAddedToCart}>
-            {isAddedToCart ? 'Added to cart' : 'Add to cart'}
+            {isAddedToCart ? t('addedToCart') : t('addToCart')}
           </Button>
           <button
             className={classNames([
diff --git a/src/components/CategoryCard.tsx b/src/components/CategoryCard.tsx
index 6ed82db..5ff4bb0 100644
--- a/src/components/CategoryCard.tsx
+++ b/src/components/CategoryCard.tsx
@@ -1,5 +1,6 @@
 import { NavLink } from 'react-router-dom';
 import { useGetProductsByCategoryQuery } from '../redux/api/productApi';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   type: string;
@@ -7,12 +8,13 @@ type Props = {
 };
 
 const CategoryCard = ({ type, image }: Props) => {
+  const { t } = useTranslation();
   const normalizedType = type.toLowerCase();
   const { data } = useGetProductsByCategoryQuery(normalizedType);
   const modelCounter =
     data?.totalProducts === 1
-      ? `${data?.totalProducts} model`
-      : `${data?.totalProducts} models`;
+      ? `${data?.totalProducts} ${t('model')}`
+      : `${data?.totalProducts} ${t('models')}`;
 
   return (
     <NavLink
@@ -25,7 +27,7 @@ const CategoryCard = ({ type, image }: Props) => {
         className="w-full h-4/5 border-0 box-border rounded-lg"
       />
       <p className="font-mont font-bold text-[22px] mt-[24px] text-primary-light dark:text-primary-dark">
-        {type}
+        {t(normalizedType)}
       </p>
       <p className="font-mont font-semibold text-[14px] text-secondary dark:text-secondary-dark">
         {modelCounter}
diff --git a/src/components/CheckoutModal.tsx b/src/components/CheckoutModal.tsx
index 8d2bf40..2ce9eea 100644
--- a/src/components/CheckoutModal.tsx
+++ b/src/components/CheckoutModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FiSmile, FiX } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
-import { FiX, FiSmile } from 'react-icons/fi';
 import { Button } from './Button';
 
 type Props = {
@@ -10,6 +11,7 @@ type Props = {
 
 export const CheckoutModal: React.FC<Props> = ({ showModal, onCloseModal }) => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   function handlebackToHome() {
     navigate('/');
@@ -30,20 +32,20 @@ export const CheckoutModal: React.FC<Props> = ({ showModal, onCloseModal }) => {
           </button>
           <div className="relative p-4 flex-auto">
             <h3 className="flex justify-center items-center font-Mont text-primary-light dark:text-primary-dark text-2xl">
-              Your payment was successfull
+              {t('successfulPayment')}
             </h3>
             <p className="pt-8 flex items-center justify-center font-Mont text-secondary-light dark:text-secondary-dark gap-2">
-              Thank you for shopping with us!
+              {t('thanksForOrder')}
               <span className="flex items-center">
                 <FiSmile className="text-accent-light dark:text-accent-dark mb-1" />
               </span>
             </p>
             <p className="pt-2 flex justify-center font-Mont text-secondary">
-              Your order has been placed
+              {t('orderPlaced')}
             </p>
           </div>
           <div className="flex justify-around p-6 rounded-b w-full max-w-xs m-auto">
-            <Button onClick={handlebackToHome}>Back to Home</Button>
+            <Button onClick={handlebackToHome}>{t('backHome')}</Button>
           </div>
         </div>
       )}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 35ec0fc..776e3fa 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,8 +1,11 @@
+import { useTranslation } from 'react-i18next';
+import { FiChevronUp } from 'react-icons/fi';
 import { NavLink } from 'react-router-dom';
 import logo from '../assets/images/logo.svg';
-import { FiChevronUp } from 'react-icons/fi';
 
 export const Footer = () => {
+  const { t } = useTranslation();
+
   const handleClickToTop = () => {
     window.scrollTo({
       top: 0,
@@ -29,7 +32,7 @@ export const Footer = () => {
                   className="duration-150 select-none uppercase text-secondary-light dark:text-secondary-dark font-extrabold text-xs hover:text-primary-light dark:hover:text-primary-dark active:text-primary-light dark:active:text-primary-dark focus:text-primary-light dark:focus:text-primary-dark font-Mont"
                   href="#"
                 >
-                  Github
+                  GitHub
                 </a>
               </li>
 
@@ -38,7 +41,7 @@ export const Footer = () => {
                   className="duration-150 select-none uppercase text-secondary-light dark:text-secondary-dark font-extrabold text-xs hover:text-primary-light dark:hover:text-primary-dark active:text-primary-light dark:active:text-primary-dark focus:text-primary-light dark:focus:text-primary-dark font-Mont"
                   to="/contacts"
                 >
-                  Contacts
+                  {t('contacts')}
                 </NavLink>
               </li>
 
@@ -47,7 +50,7 @@ export const Footer = () => {
                   className="duration-150 select-none uppercase text-secondary-light dark:text-secondary-dark font-extrabold text-xs hover:text-primary-light dark:hover:text-primary-dark active:text-primary-light dark:active:text-primary-dark focus:text-primary-light dark:focus:text-primary-dark font-Mont"
                   href="#"
                 >
-                  Rights
+                  {t('rights')}
                 </a>
               </li>
             </ul>
@@ -56,7 +59,7 @@ export const Footer = () => {
 
         <div className="flex justify-center tablet:justify-center items-center space-x-4 mt-4 tablet:mt-0 ">
           <p className="select-none text-secondary-light dark:text-secondary-dark font-bold text-xs whitespace-nowrap tablet:pl-24">
-            Back to top
+            {t('backToTop')}
           </p>
           <div
             onClick={handleClickToTop}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e6abb4b..6eb0925 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FiHeart, FiMenu, FiShoppingBag, FiX } from 'react-icons/fi';
 import { NavLink, useLocation } from 'react-router-dom';
 import logo from '../assets/images/logo.svg';
@@ -7,13 +8,7 @@ import BurgerMenu from '../pages/BurgerMenu';
 import { useAppSelector } from '../redux';
 import { ItemCounter } from './ItemCounter';
 import ThemeToggle from './ThemeToggle';
-
-const navLinks = [
-  { name: 'Home', path: '/' },
-  { name: 'Phones', path: 'phones' },
-  { name: 'Tablets', path: 'tablets' },
-  { name: 'Accessories', path: 'accessories' },
-];
+import LanguageSelector from './LanguageSelector';
 
 export const Header: React.FC = () => {
   const { favouriteItems } = useAppSelector((state) => state.favourites);
@@ -21,6 +16,14 @@ export const Header: React.FC = () => {
   const { pathname } = useLocation();
   const [menuIsOpen, setMenuIsOpen] = useState(false);
   const iconColor = classNames('dark:text-primary-dark');
+  const { t } = useTranslation();
+
+  const navLinks = [
+    { name: t('home'), path: '/' },
+    { name: t('phones'), path: 'phones' },
+    { name: t('tablets'), path: 'tablets' },
+    { name: t('accessories'), path: 'accessories' },
+  ];
 
   const handleOpenMenu = () => setMenuIsOpen((prev) => !prev);
 
@@ -58,6 +61,7 @@ export const Header: React.FC = () => {
       </div>
 
       <div className="flex items-center justify-end">
+        <LanguageSelector/>
         <ThemeToggle />
         <div className="border-l border-elements-light dark:border-elements-dark box-border">
           <NavLink
diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
new file mode 100644
index 0000000..c468e1e
--- /dev/null
+++ b/src/components/LanguageSelector.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const LanguageSelector = () => {
+  const { t, i18n } = useTranslation();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  const changeLanguage = (language: string | undefined) => {
+    i18n.changeLanguage(language);
+    setIsMenuOpen(false);
+  };
+
+  return (
+    <div className="relative pr-4">
+      <button
+        type="button"
+        className="text-sm font-semibold text-gray-900 dark:text-white-light"
+        onClick={toggleMenu}
+      >
+        {t('language')}
+      </button>
+      {isMenuOpen && (
+        <div className="absolute mt-3 tablet:mt-5 flex justify-center">
+          <div className="flex border rounded-lg shadow-md desktop:flex-col flex-row">
+            <button
+              onClick={() => changeLanguage('en')}
+              className="px-3 py-1 tablet:px-4 tablet:py-2 desktop:px-7 text-sm text-gray-900 text-center dark:text-white-light"
+            >
+              EN
+            </button>
+            <button
+              onClick={() => changeLanguage('uk')}
+              className="px-3 py-1 tablet:px-4 tablet:py-2 desktop:px-7  text-sm text-gray-900 text-center dark:text-white-light"
+            >
+              UA
+            </button>
+            <button
+              onClick={() => changeLanguage('ja')}
+              className="px-3 py-1 tablet:px-4 tablet:py-2 desktop:px-7  text-sm text-gray-900 text-center dark:text-white-light"
+            >
+              JA
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LanguageSelector;
diff --git a/src/index.tsx b/src/index.tsx
index 6bd43e5..7149daa 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,6 +3,7 @@ import { Provider } from 'react-redux';
 import './index.css';
 import { Root } from './Root';
 import { store } from './redux';
+import './localization/i18n';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
diff --git a/src/localization/i18n.js b/src/localization/i18n.js
new file mode 100644
index 0000000..f2ae1a8
--- /dev/null
+++ b/src/localization/i18n.js
@@ -0,0 +1,29 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import translationEN from './locales/en.json';
+import translationUK from './locales/uk.json';
+import translationJA from './locales/ja.json';
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: translationEN,
+      },
+      uk: {
+        translation: translationUK,
+      },
+      ja: {
+        translation: translationJA,
+      },
+    },
+    lng: 'en',
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;
diff --git a/src/localization/locales/en.json b/src/localization/locales/en.json
new file mode 100644
index 0000000..f1717be
--- /dev/null
+++ b/src/localization/locales/en.json
@@ -0,0 +1,54 @@
+{
+  "home": "Home",
+  "phones": "Phones",
+  "tablets": "Tablets",
+  "accessories": "Accessories",
+  "title": "Welcome to Nice Gadgets store!",
+  "newModels": "Brand new models",
+  "addToCart": "Add to cart",
+  "toTheCart": "Successfully added to your cart!",
+  "toTheCartError": "This product is already in your cart",
+  "addedToCart": "Added to cart",
+  "shopByCategory": "Shop by category",
+  "mobilePhones": "Mobile phones",
+  "hotPrices": "Hot prices",
+  "contacts": "Contacts",
+  "rights": "Rights",
+  "backToTop": "Back to top",
+  "model": "model",
+  "modeli": "models",
+  "models": "models",
+  "sortBy": "Sort by",
+  "newest": "Newest",
+  "oldest": "Oldest",
+  "itemsOnPage": "Items on page",
+  "runOutOfProducts": "Sorry, we ran out of these products",
+  "back": "Back",
+  "availableColors": "Available colors",
+  "selectCapacity": "Select capacity",
+  "about": "About",
+  "techSpecs": "Tech specs",
+  "recomended": "Recomended",
+  "favourites": "Favourites",
+  "noFavourites": "You don't have favourite products",
+  "cart": "Cart",
+  "emptyCart": "Your cart is empty",
+  "startShopping": "Start shopping now!",
+  "totalFor": "Total for",
+  "item": "item",
+  "itemu": "items",
+  "items": "items",
+  "checkout": "Checkout",
+  "successfulPayment": "Your payment was successfull",
+  "thanksForOrder": "Thank you for shopping with us!",
+  "orderPlaced": "Your order has been placed",
+  "backHome": "Back to Home",
+  "pageNotFound": "Page not found",
+  "movedOrDeleted": "Most likely, this page has been moved or deleted",
+  "addressMistake": "You may have made a mistake when entering the address",
+  "checkAgain": "Please check it again",
+  "takeMeHome": "Take me home",
+  "contactSupport": "Contact support",
+  "ourTeam": "Our Team",
+  "language": "Language"
+}
diff --git a/src/localization/locales/ja.json b/src/localization/locales/ja.json
new file mode 100644
index 0000000..4fc04b2
--- /dev/null
+++ b/src/localization/locales/ja.json
@@ -0,0 +1,52 @@
+{
+  "home": "ホーム",
+  "phones": "スマートフォン",
+  "tablets": "タブレット",
+  "accessories": "アクセサリー",
+  "title": "ナイスガジェットストアへようこそ！",
+  "newModels": "ブランド新しいモデル",
+  "addToCart": "カートに追加",
+  "toTheCart": "カートに追加しました！",
+  "toTheCartError": "この製品はすでにカートにあります",
+  "addedToCart": "カートに追加されました",
+  "shopByCategory": "カテゴリー別にショッピング",
+  "mobilePhones": "モバイルフォン",
+  "hotPrices": "ホットプライス",
+  "contacts": "お問い合わせ",
+  "rights": "権利",
+  "backToTop": "トップに戻る",
+  "model": "モデル",
+  "modeli": "モデル",
+  "models": "モデル",
+  "sortBy": "並び替え",
+  "newest": "新着",
+  "oldest": "最古",
+  "itemsOnPage": "ページ上のアイテム",
+  "runOutOfProducts": "申し訳ありませんが、これらの製品は品切れです",
+  "back": "戻る",
+  "availableColors": "利用可能な色",
+  "selectCapacity": "容量を選択",
+  "about": "について",
+  "techSpecs": "技術仕様",
+  "recomended": "おすすめ",
+  "favourites": "お気に入り",
+  "noFavourites": "お気に入りの製品はありません",
+  "cart": "カート",
+  "emptyCart": "カートは空です",
+  "startShopping": "今すぐショッピングを始める！",
+  "totalFor": "合計金額",
+  "items": "アイテム",
+  "checkout": "チェックアウト",
+  "successfulPayment": "お支払いが成功しました",
+  "thanksForOrder": "お買い物いただきありがとうございます！",
+  "orderPlaced": "ご注文が完了しました",
+  "backHome": "ホームに戻る",
+  "pageNotFound": "ページが見つかりません",
+  "movedOrDeleted": "おそらく、このページは移動または削除されました",
+  "addressMistake": "アドレスを入力する際に誤りがあるかもしれません",
+  "checkAgain": "もう一度確認してください",
+  "takeMeHome": "ホームに戻る",
+  "contactSupport": "サポートにお問い合わせ",
+  "ourTeam": "チーム",
+  "language": "言語"
+}
diff --git a/src/localization/locales/uk.json b/src/localization/locales/uk.json
new file mode 100644
index 0000000..dec2cf9
--- /dev/null
+++ b/src/localization/locales/uk.json
@@ -0,0 +1,54 @@
+{
+  "home": "Головна",
+  "phones": "Смартфони",
+  "tablets": "Планшети",
+  "accessories": "Аксесуари",
+  "title": "Ласкаво просимо до Nice Gadgets!",
+  "newModels": "Нові моделі",
+  "addToCart": "Додати в кошик",
+  "toTheCart": "Успішно додано до вашого кошика!",
+  "toTheCartError": "Цей товар вже є у вашому кошику",
+  "addedToCart": "Додано до кошика",
+  "shopByCategory": "Купуйте за категоріями",
+  "mobilePhones": "Мобільні телефони",
+  "hotPrices": "Гарячі ціни",
+  "contacts": "Контакти",
+  "rights": "Всі права захищені",
+  "backToTop": "Повернутися наверх",
+  "model": "модель",
+  "modeli": "моделі",
+  "models": "моделей",
+  "sortBy": "Сортувати за",
+  "newest": "Найновіші",
+  "oldest": "Найстаріші",
+  "itemsOnPage": "Товарів на сторінці",
+  "runOutOfProducts": "На жаль, цього товару більше немає в наявності",
+  "back": "Назад",
+  "availableColors": "Доступні кольори",
+  "selectCapacity": "Оберіть об'єм",
+  "about": "Про нас",
+  "techSpecs": "Технічні характеристики",
+  "recomended": "Також може сподобатись",
+  "favourites": "Обрані",
+  "noFavourites": "У вас немає улюблених товарів",
+  "cart": "Кошик",
+  "emptyCart": "Ваш кошик порожній",
+  "startShopping": "Почніть покупки зараз!",
+  "totalFor": "Загалом за",
+  "items": "товарів",
+  "item": "товар",
+  "itemu": "товари",
+  "checkout": "Оформити замовлення",
+  "successfulPayment": "Ваш платіж пройшов успішно",
+  "thanksForOrder": "Дякуємо за покупки в нашому магазині!",
+  "orderPlaced": "Ваше замовлення прийнято",
+  "backHome": "Повернутися на головну",
+  "pageNotFound": "Сторінку не знайдено",
+  "movedOrDeleted": "Можливо, цю сторінку перемістили або видалили",
+  "addressMistake": "Можливо, ви допустили помилку при введенні адреси",
+  "checkAgain": "Будь ласка, перевірте її ще раз",
+  "takeMeHome": "Повернути мене додому",
+  "contactSupport": "Зв'яжіться з підтримкою",
+  "ourTeam": "Наша Команда",
+  "language": "Мова"
+}
diff --git a/src/pages/BurgerMenu.tsx b/src/pages/BurgerMenu.tsx
index 3e2d668..0bec4ca 100644
--- a/src/pages/BurgerMenu.tsx
+++ b/src/pages/BurgerMenu.tsx
@@ -2,10 +2,12 @@ import { FiHeart, FiShoppingBag } from 'react-icons/fi';
 import { NavLink } from 'react-router-dom';
 import { ItemCounter } from '../components/ItemCounter';
 import { useAppSelector } from '../redux';
+import { useTranslation } from 'react-i18next';
 
 const BurgerMenu = () => {
   const { favouriteItems } = useAppSelector((state) => state.favourites);
   const { items } = useAppSelector((state) => state.cart);
+  const { t } = useTranslation();
 
   return (
     <div className="fixed inset-0 top-12 z-50 bg-white-light dark:bg-white-dark -translate-x-full peer-checked/nav:-translate-x-0 duration-300 flex justify-between flex-col ">
@@ -14,25 +16,25 @@ const BurgerMenu = () => {
           to="/"
           className="block py-2 mt-4 leading-tight text-center text-secondary-light dark:text-secondary-dark text-xs uppercase tracking-widest transition-colors hover:text-primary-light dark:hover:text-primary-dark"
         >
-          <p className="whitespace-nowrap">home</p>
+          <p className="whitespace-nowrap">{t('home')}</p>
         </NavLink>
         <NavLink
           to="/phones"
           className="block py-2 mt-4 leading-tight text-center text-secondary-light dark:text-secondary-dark text-xs uppercase tracking-widest transition-colors hover:text-primary-light dark:hover:text-primary-dark"
         >
-          <p className="whitespace-nowrap">phones</p>
+          <p className="whitespace-nowrap">{t('phones')}</p>
         </NavLink>
         <NavLink
           to="/tablets"
           className="block py-2 mt-4 leading-tight text-center text-secondary-light dark:text-secondary-dark text-xs uppercase tracking-widest transition-colors hover:text-primary-light dark:hover:text-primary-dark"
         >
-          <p className="whitespace-nowrap">tablets</p>
+          <p className="whitespace-nowrap">{t('tablets')}</p>
         </NavLink>
         <NavLink
           to="/accessories"
           className="block py-2 mt-4 leading-tight text-center text-secondary-light dark:text-secondary-dark text-xs uppercase tracking-widest transition-colors hover:text-primary-light dark:hover:text-primary-dark"
         >
-          <p className="whitespace-nowrap">accessories</p>
+          <p className="whitespace-nowrap">{t('accessories')}</p>
         </NavLink>
       </main>
 
diff --git a/src/pages/CartPage.tsx b/src/pages/CartPage.tsx
index 300506c..b77bbfc 100644
--- a/src/pages/CartPage.tsx
+++ b/src/pages/CartPage.tsx
@@ -1,22 +1,34 @@
 import classNames from 'classnames';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { NavLink } from 'react-router-dom';
+import BreadCrumb from '../components/BreadCrumb';
 import { Button } from '../components/Button';
 import CartItem from '../components/CartItem';
 import { CheckoutModal } from '../components/CheckoutModal';
 import { clearCart, useAppDispatch, useAppSelector } from '../redux';
 import { getTotalProductsCost } from '../utils/getTotalCost';
 import { getTotalItemsCount } from '../utils/getTotalItemsCount';
-import BreadCrumb from '../components/BreadCrumb';
 
 const CartPage = () => {
   const { items: cartItems } = useAppSelector((state) => state.cart);
   const [showModal, setShowModal] = useState<boolean>(false);
   const dispatch = useAppDispatch();
+  const { t } = useTranslation();
 
   const totalCost = getTotalProductsCost(cartItems);
   const totalItemsCount = getTotalItemsCount(cartItems);
 
+  let itemCounter;
+
+  if (totalItemsCount === 1) {
+    itemCounter = `${t('totalFor')} ${totalItemsCount} ${t('item')}`;
+  } else if (totalItemsCount >= 2 && totalItemsCount <= 4) {
+    itemCounter = `${t('totalFor')} ${totalItemsCount} ${t('itemu')}`;
+  } else {
+    itemCounter = `${t('totalFor')} ${totalItemsCount} ${t('items')}`;
+  }
+
   const handlePaymentSuccess = () => {
     localStorage.removeItem('cart-items');
     dispatch(clearCart());
@@ -42,7 +54,7 @@ const CartPage = () => {
         <BreadCrumb />
         <div className="mb-8">
           <h1 className="mb-2 text-[32px] font-extrabold leading-[41px] tracking-[0.32px] tablet:mt-10 tablet:text-5xl dark:text-primary-dark">
-            Cart
+            {t('cart')}
           </h1>
         </div>
 
@@ -59,17 +71,17 @@ const CartPage = () => {
                 {`${totalCost}$`}
               </h3>
               <div className="text-center text-secondary-light dark:text-secondary-dark text-sm font-semibold leading-[21px] mb-4">
-                {`Total for ${totalItemsCount} items`}
+                {itemCounter}
               </div>
               <span className="w-full h-[0px] border border-elements-light dark:border-elements-dark mb-4"></span>
-              <Button onClick={handlePaymentSuccess}>Checkout</Button>
+              <Button onClick={handlePaymentSuccess}>{t('checkout')}</Button>
             </div>
           </div>
         ) : (
           <>
-            <h3 className="mb-2">Your cart is empty</h3>
+            <h3 className="mb-2">{t('emptyCart')}</h3>
             <NavLink to="/phones" className="cursor-pointer font-bold w-fit">
-              Start shopping now!
+              {t('startShopping')}
             </NavLink>
           </>
         )}
diff --git a/src/pages/CatalogPage.tsx b/src/pages/CatalogPage.tsx
index 9313e06..a08686d 100644
--- a/src/pages/CatalogPage.tsx
+++ b/src/pages/CatalogPage.tsx
@@ -9,17 +9,7 @@ import Pagination from '../components/Pagination';
 import { useGetProductsQuery } from '../redux/api/productApi';
 import { CatalogTitle } from '../types/PageTitle';
 import { IProduct } from '../types/Product';
-
-const sortOptions = [
-  {
-    value: 'Newest',
-    label: 'Newest',
-  },
-  {
-    value: 'Oldest',
-    label: 'Oldest',
-  },
-];
+import { useTranslation } from 'react-i18next';
 
 const perPageOptions = [
   {
@@ -36,13 +26,8 @@ const perPageOptions = [
   },
 ];
 
-const title: CatalogTitle = {
-  '/phones': 'Mobile phones',
-  '/tablets': 'Tablets',
-  '/accessories': 'Accessories',
-};
-
 const CatalogPage: React.FC = () => {
+  const { t } = useTranslation();
   const { pathname } = useLocation();
   const [searchParams] = useSearchParams();
   const currentPage = Number(searchParams.get('page')) || 1;
@@ -60,9 +45,26 @@ const CatalogPage: React.FC = () => {
     type: pathname.slice(1),
   });
 
+  const title: CatalogTitle = {
+    '/phones': t('mobilePhones'),
+    '/tablets': t('tablets'),
+    '/accessories': t('accessories'),
+  };
+
+  const sortOptions = [
+    {
+      value: `${t('newest')}`,
+      label: `${t('newest')}`,
+    },
+    {
+      value: `${t('oldest')}`,
+      label: `${t('oldest')}`,
+    },
+  ];
+
   const total = products ? products.totalProducts : 0;
 
-  const modelCounter = total === 1 ? `${total} model` : `${total} models`;
+  const modelCounter = total === 1 ? `${total} ${t('models')}` : `${total} ${t('models')}`;
 
   const handlePageNumber = (pageNo: number) => {
     searchParams.set('page', pageNo.toString());
@@ -76,7 +78,7 @@ const CatalogPage: React.FC = () => {
 
           <header>
             <h1 className="mb-2 text-[32px] font-extrabold leading-[41px] tracking-[0.32px] tablet:mt-10 tablet:text-5xl dark:text-primary-dark">
-              {title[pathname as keyof CatalogTitle]}
+              {t(title[pathname as keyof CatalogTitle])}
             </h1>
 
             <p className="text-sm font-semibold leading-[21px] text-secondary-light dark:text-secondary-dark mb-8">
@@ -87,7 +89,7 @@ const CatalogPage: React.FC = () => {
             <div className="flex gap-4 mb-6">
               <Dropdown
                 className="w-[136px] tablet:w-[187px] dark:bg-white-dark dark:text-secondary-dark dark:border-none"
-                label="Sort By"
+                label={t('sortBy')}
                 query="sortBy"
                 options={sortOptions}
               />
@@ -95,7 +97,7 @@ const CatalogPage: React.FC = () => {
               <Dropdown
                 query="perPage"
                 className="w-[136px] dark:bg-white-dark dark:text-secondary-dark dark:border-none"
-                label="Items on page"
+                label={t('itemsOnPage')}
                 options={perPageOptions}
               />
             </div>
@@ -112,7 +114,7 @@ const CatalogPage: React.FC = () => {
               ))
             ) : (
               <p className="col-span-4 tablet:col-span-12 desktop:col-span-24 dark:text-primary-dark">
-                Sorry, we ran out of these products
+                {t('runOutOfProducts')}
               </p>
             )}
           </div>
diff --git a/src/pages/ContactsPage.tsx b/src/pages/ContactsPage.tsx
index 75ad46f..09e1579 100644
--- a/src/pages/ContactsPage.tsx
+++ b/src/pages/ContactsPage.tsx
@@ -1,8 +1,11 @@
+import { useTranslation } from 'react-i18next';
 import BreadCrumb from '../components/BreadCrumb';
 import ContactCard from '../components/ContactCard';
 import { contacts } from '../utils/contacts';
 
 const ContactsPage = () => {
+  const { t } = useTranslation();
+
   return (
     <main
       className="container mx-auto flex flex-col items-center
@@ -12,7 +15,7 @@ const ContactsPage = () => {
 
       <div className="mb-8">
         <h1 className="mb-2 text-[32px] font-extrabold leading-[41px] tracking-[0.32px] tablet:mt-10 tablet:text-5xl">
-          Our Team
+          {t('ourTeam')}
         </h1>
       </div>
 
diff --git a/src/pages/FavouritesPage.tsx b/src/pages/FavouritesPage.tsx
index ffa459c..ca2e924 100644
--- a/src/pages/FavouritesPage.tsx
+++ b/src/pages/FavouritesPage.tsx
@@ -1,9 +1,11 @@
+import { useTranslation } from 'react-i18next';
 import BreadCrumb from '../components/BreadCrumb';
 import { Card } from '../components/Card';
 import { useAppSelector } from '../redux';
 
 const FavouritesPage = () => {
   const { favouriteItems } = useAppSelector((state) => state.favourites);
+  const { t } = useTranslation();
 
   return (
     <main className="container mx-auto flex flex-col items-center tablet:items-start p-4 pb-6 tablet:px-6 desktop:w-[1200px]">
@@ -11,13 +13,13 @@ const FavouritesPage = () => {
 
       <header>
         <h1 className="mb-2 text-[32px] font-extrabold leading-[41px] tracking-[0.32px] tablet:mt-10 tablet:text-5xl dark:text-primary-dark">
-          Favourites
+          {t('favourites')}
         </h1>
       </header>
       {favouriteItems.length ? (
         <>
           <p className="text-sm mb-8 tablet:mb-9 font-semibold leading-[21px] text-secondary dark:text-secondary-dark">
-            {`${favouriteItems.length} items`}
+            {`${favouriteItems.length} ${t('items')}`}
           </p>
           <div className="grid grid-cols-1 gap-4 tablet:grid-cols-2 desktop:grid-cols-4">
             {favouriteItems.map((pr) => (
@@ -26,7 +28,7 @@ const FavouritesPage = () => {
           </div>
         </>
       ) : (
-        <h3>You don't have favourite products</h3>
+        <h3>{t('noFavourites')}</h3>
       )}
     </main>
   );
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 529755f..9b8e1af 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { Navigation, Pagination } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/navigation';
@@ -10,15 +11,16 @@ const HomePage = () => {
   const phonesImage = require('../assets/images/phones-category.png');
   const tabletsImage = require('../assets/images/tablets-category.png');
   const accessoriesoneImage = require('../assets/images/accessories-category.png');
+  const { t } = useTranslation();
 
   return (
     <main>
       <h1
-        className="py-[24px] mx-[16px] max-w-[288px] font-mont font-extrabold text-[32px] line-clamp-2
+        className="py-[28px] mx-[16px] font-mont font-extrabold text-[28px] line-clamp-2
     tablet:line-clamp-none tablet:max-w-full tablet:text-[48px] tablet:py-[32px] tablet:mx-[24px]
     desktop:max-w-[1136px] desktop:py-[56px] desktop:mx-[32px] dark:text-primary-dark"
       >
-        Welcome to Nice Gadgets store!
+        {t('title')}
       </h1>
       <div className="select-none w-full tablet:w-4/5 mx-auto">
         <Swiper
@@ -59,11 +61,11 @@ const HomePage = () => {
         </Swiper>
       </div>
 
-      <Carousel title={'Brand new models'} type={'new'} />
+      <Carousel title={t('newModels')} type={'new'} />
 
       <section className="desktop:max-w-[1136px] desktop:mx-auto">
         <h2 className="font-mont font-extrabold text-[22px] tablet:text-[32px] text-primary-light dark:text-primary-dark mx-[16px] tablet:mx-[24px] desktop:mx-[32px]">
-          Shop by category
+          {t('shopByCategory')}
         </h2>
         <div className="grid grid-cols-4 gap-8 tablet:grid-cols-12 tablet:gap-4 tablet:mx-[24px] desktop:mx-[32px] desktop:grid-cols-24 mx-[16px] mt-[24px]">
           <CategoryCard type={'Phones'} image={phonesImage} />
@@ -71,7 +73,7 @@ const HomePage = () => {
           <CategoryCard type={'Accessories'} image={accessoriesoneImage} />
         </div>
       </section>
-      <Carousel title={'Hot prices'} type={'discount'} />
+      <Carousel title={t('hotPrices')} type={'discount'} />
     </main>
   );
 };
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
index 7a39867..225f7e3 100644
--- a/src/pages/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage.tsx
@@ -1,4 +1,8 @@
+import { useTranslation } from 'react-i18next';
+
 const NotFoundPage = () => {
+  const { t } = useTranslation();
+
   return (
     <main className="grid min-h-full place-items-center bg-white-light dark:bg-white-dark px-6 py-24 tablet:py-32 desktop:px-8">
       <div className="text-center">
@@ -8,25 +12,25 @@ const NotFoundPage = () => {
           className="mx-auto w-[250px] mb-4 mt-[-100px]"
         />
         <h1 className="mt-4 text-3xl font-bold tracking-tight text-primary-light dark:text-primary-dark tablet:text-5xl">
-          Page not found
+          {t('pageNotFound')}
         </h1>
         <p className="mt-6 text-base leading-7 text-secondary">
-          Most likely, this page has been moved or deleted
-          <br /> You may have made a mistake when entering the address
-          <br /> Please check it again
+          {t('movedOrDeleted')}
+          <br /> {t('addressMistake')}
+          <br /> {t('checkAgain')}
         </p>
         <div className="mt-10 flex items-center justify-center gap-x-6">
           <a
             href="/"
             className="rounded-md bg-accent-light dark:bg-accent-dark px-3.5 py-2.5 text-sm font-semibold text-white-light dark:text-white-dark shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
           >
-            Take me home
+            {t('takeMeHome')}
           </a>
           <a
             href="/"
             className="text-sm font-semibold text-primary-light dark:text-primary-dark"
           >
-            Contact support <span aria-hidden="true">&rarr;</span>
+            {('contactSupport')} <span aria-hidden="true">&rarr;</span>
           </a>
         </div>
       </div>
diff --git a/src/pages/ProductPage.tsx b/src/pages/ProductPage.tsx
index 1e0248e..00fa838 100644
--- a/src/pages/ProductPage.tsx
+++ b/src/pages/ProductPage.tsx
@@ -1,5 +1,7 @@
+import classNames from 'classnames';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
 import { FaHeart } from 'react-icons/fa';
 import { FiChevronLeft, FiHeart } from 'react-icons/fi';
 import { NavLink, useLocation, useParams } from 'react-router-dom';
@@ -19,7 +21,6 @@ import {
 } from '../redux';
 import { useGetProductByIdQuery } from '../redux/api/productApi';
 import { IDescription } from '../types/Description';
-import classNames from 'classnames';
 
 const ProductPage = () => {
   const { productId } = useParams();
@@ -32,6 +33,7 @@ const ProductPage = () => {
   const { data, isError, isLoading, isFetching } = useGetProductByIdQuery(
     productId!,
   );
+  const { t } = useTranslation();
 
   const route = pathname.split('/')[1];
   const isFavourite = favouriteItems.some((item) => item._id === data?._id);
@@ -75,13 +77,13 @@ const ProductPage = () => {
 
   const handleAddToCart = () => {
     if (items.some(({ id }) => id === data?._id)) {
-      toast.error('This product is already in your cart');
+      toast.error(t('toTheCartError'));
 
       return;
     }
 
     dispatch(addItemToCart(itemData));
-    toast.success('Successfully added to your cart!');
+    toast.success(t('toTheCart'));
   };
 
   return (
@@ -103,7 +105,7 @@ const ProductPage = () => {
             >
               <span>
                 <FiChevronLeft className="inline mr-1" />
-                Back
+                {t('back')}
               </span>
             </NavLink>
             <h1 className="font-extrabold text-4xl text-primary-light dark:text-primary-dark leading-tight mb-6 col-span-4 tablet:col-span-12 desktop:col-span-24 col-start-1">
@@ -140,7 +142,7 @@ const ProductPage = () => {
               </div>
 
               <div className="col-span-4 tablet:col-span-5 desktop:col-span-12">
-                <p className="text-xs text-secondary">Available colors</p>
+                <p className="text-xs text-secondary-light dark:text-secondary-dark">{t('availableColors')}</p>
 
                 <div className="flex space-x-2 mt-2">
                   {data?.colorsAvailable.map((color) => (
@@ -156,7 +158,7 @@ const ProductPage = () => {
 
                 <div className="mt-6 col-span-4 tablet:col-start-7 tablet:col-span-5 desktop:col-start-12 desktop:col-span-7">
                   <p className="text-xs text-secondary-light dark:text-secondary-dark mb-2">
-                    Select capacity
+                    {t('selectCapacity')}
                   </p>
 
                   {data?.capacityAvailable &&
@@ -184,7 +186,7 @@ const ProductPage = () => {
                     onClick={handleAddToCart}
                     outline={!!isAddedToCart}
                   >
-                    {isAddedToCart ? 'Added to cart' : 'Add to cart'}
+                    {isAddedToCart ? t('addedToCart') : t('addToCart')}
                   </Button>
                   <div>
                     <button
@@ -210,7 +212,7 @@ const ProductPage = () => {
                         key={characteristic}
                         className="col-span-4 tablet:col-span-12"
                       >
-                        <p className="text-left text-xs font-semibold text-secondary">
+                        <p className="text-left text-xs font-semibold text-primary-light dark:text-secondary-dark">
                           {characteristic}
                         </p>
                         <p className="text-right text-xs font-bold text-primary-light dark:text-primary-dark">
@@ -227,14 +229,14 @@ const ProductPage = () => {
                 <>
                   <div className="desktop:w-1/2">
                     <h2 className="mt-16 font-extrabold text-2xl text-primary-light dark:text-primary-dark">
-                      About
+                      {t('about')}
                     </h2>
                     <Line width="col-span-4 w-auto tablet:col-start-7 tablet:col-span-5 tablet:w-auto desktop:col-start-12 desktop:col-span-7 desktop:w-[320px] mt-6" />
 
                     {data.description.map((descItem: IDescription) => (
                       <div key={descItem._id}>
                         <h3 className="mt-8 font-bold text-primary-light dark:text-primary-dark text-xl">
-                          {descItem.title}
+                          {t(descItem.title)}
                         </h3>
                         <p className="mt-4 text-secondary-light dark:text-secondary-dark font-medium text-sm">
                           {descItem.text.map((textItem) => (
@@ -249,7 +251,7 @@ const ProductPage = () => {
 
               <div className="desktop:w-1/2">
                 <h2 className="mt-16 font-extrabold text-2xl text-primary-light dark:text-primary-dark">
-                  Tech specs
+                  {t('techSpecs')}
                 </h2>
 
                 <Line width="col-span-4 w-auto tablet:col-start-7 tablet:col-span-5 tablet:w-auto desktop:col-start-12 desktop:col-span-7 desktop:w-[320px] mt-6" />
@@ -274,7 +276,7 @@ const ProductPage = () => {
               </div>
             </section>
             <section className="col-span-4 tablet:col-span-12 desktop:col-span-24">
-              <Carousel title={'Recommended'} type={'recommended'} />
+              <Carousel title={t('recomended')} type={'recommended'} />
             </section>
           </Loader>
         </ErrorMessage>

From e2c6a220f61e617bd19904d6bb0d3226868fe3b0 Mon Sep 17 00:00:00 2001
From: NazarBaraban <barabannazar44@gmail.com>
Date: Thu, 14 Sep 2023 23:34:53 +0300
Subject: [PATCH 2/7] test

---
 src/components/Header.tsx  |  2 +-
 src/localization/i18n.js   | 34 ++++++++++++++++------------------
 src/pages/CatalogPage.tsx  |  3 ++-
 src/pages/NotFoundPage.tsx |  2 +-
 src/pages/ProductPage.tsx  |  4 +++-
 5 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6eb0925..1c9ebe7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -61,7 +61,7 @@ export const Header: React.FC = () => {
       </div>
 
       <div className="flex items-center justify-end">
-        <LanguageSelector/>
+        <LanguageSelector />
         <ThemeToggle />
         <div className="border-l border-elements-light dark:border-elements-dark box-border">
           <NavLink
diff --git a/src/localization/i18n.js b/src/localization/i18n.js
index f2ae1a8..d8d884c 100644
--- a/src/localization/i18n.js
+++ b/src/localization/i18n.js
@@ -5,25 +5,23 @@ import translationEN from './locales/en.json';
 import translationUK from './locales/uk.json';
 import translationJA from './locales/ja.json';
 
-i18n
-  .use(initReactI18next)
-  .init({
-    resources: {
-      en: {
-        translation: translationEN,
-      },
-      uk: {
-        translation: translationUK,
-      },
-      ja: {
-        translation: translationJA,
-      },
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: translationEN,
     },
-    lng: 'en',
-    fallbackLng: 'en',
-    interpolation: {
-      escapeValue: false,
+    uk: {
+      translation: translationUK,
     },
-  });
+    ja: {
+      translation: translationJA,
+    },
+  },
+  lng: 'en',
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false,
+  },
+});
 
 export default i18n;
diff --git a/src/pages/CatalogPage.tsx b/src/pages/CatalogPage.tsx
index a08686d..623172f 100644
--- a/src/pages/CatalogPage.tsx
+++ b/src/pages/CatalogPage.tsx
@@ -64,7 +64,8 @@ const CatalogPage: React.FC = () => {
 
   const total = products ? products.totalProducts : 0;
 
-  const modelCounter = total === 1 ? `${total} ${t('models')}` : `${total} ${t('models')}`;
+  const modelCounter =
+    total === 1 ? `${total} ${t('models')}` : `${total} ${t('models')}`;
 
   const handlePageNumber = (pageNo: number) => {
     searchParams.set('page', pageNo.toString());
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
index 225f7e3..3c56991 100644
--- a/src/pages/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage.tsx
@@ -30,7 +30,7 @@ const NotFoundPage = () => {
             href="/"
             className="text-sm font-semibold text-primary-light dark:text-primary-dark"
           >
-            {('contactSupport')} <span aria-hidden="true">&rarr;</span>
+            {'contactSupport'} <span aria-hidden="true">&rarr;</span>
           </a>
         </div>
       </div>
diff --git a/src/pages/ProductPage.tsx b/src/pages/ProductPage.tsx
index 00fa838..9c24052 100644
--- a/src/pages/ProductPage.tsx
+++ b/src/pages/ProductPage.tsx
@@ -142,7 +142,9 @@ const ProductPage = () => {
               </div>
 
               <div className="col-span-4 tablet:col-span-5 desktop:col-span-12">
-                <p className="text-xs text-secondary-light dark:text-secondary-dark">{t('availableColors')}</p>
+                <p className="text-xs text-secondary-light dark:text-secondary-dark">
+                  {t('availableColors')}
+                </p>
 
                 <div className="flex space-x-2 mt-2">
                   {data?.colorsAvailable.map((color) => (

From 23c9c57c2b672b95a8eeaea4ab1932b37d69f596 Mon Sep 17 00:00:00 2001
From: NazarBaraban <barabannazar44@gmail.com>
Date: Fri, 15 Sep 2023 11:36:27 +0300
Subject: [PATCH 3/7] upgrade selector

---
 src/components/LanguageSelector.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index c468e1e..3c2004e 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { FiGlobe } from 'react-icons/fi';
 
 const LanguageSelector = () => {
-  const { t, i18n } = useTranslation();
+  const { i18n } = useTranslation();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const toggleMenu = () => {
@@ -15,16 +16,16 @@ const LanguageSelector = () => {
   };
 
   return (
-    <div className="relative pr-4">
+    <div className="relative hover:shadow-lg dark:hover:shadow-custom-dark duration-200 p-4 tablet:py-6 flex border-x border-elements-light dark:border-elements-dark">
       <button
         type="button"
-        className="text-sm font-semibold text-gray-900 dark:text-white-light"
+        className="text-sm font-semibold text-gray-900 dark:text-white-light items-center justify-center h-4 w-4"
         onClick={toggleMenu}
       >
-        {t('language')}
+        <FiGlobe className='h-4 w-4'/>
       </button>
       {isMenuOpen && (
-        <div className="absolute mt-3 tablet:mt-5 flex justify-center">
+        <div className="absolute left-0 mt-9 tablet:mt-11 flex justify-center mb-2">
           <div className="flex border rounded-lg shadow-md desktop:flex-col flex-row">
             <button
               onClick={() => changeLanguage('en')}

From 957459832730ec01c8fb046ea7292eb00b17c24a Mon Sep 17 00:00:00 2001
From: NazarBaraban <barabannazar44@gmail.com>
Date: Fri, 15 Sep 2023 11:36:58 +0300
Subject: [PATCH 4/7] test

---
 src/components/LanguageSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index 3c2004e..69248bb 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -22,7 +22,7 @@ const LanguageSelector = () => {
         className="text-sm font-semibold text-gray-900 dark:text-white-light items-center justify-center h-4 w-4"
         onClick={toggleMenu}
       >
-        <FiGlobe className='h-4 w-4'/>
+        <FiGlobe className="h-4 w-4" />
       </button>
       {isMenuOpen && (
         <div className="absolute left-0 mt-9 tablet:mt-11 flex justify-center mb-2">

From acfdf39f3eaeef35238b3f88c6ba0ae2ca1c71b5 Mon Sep 17 00:00:00 2001
From: NazarBaraban <barabannazar44@gmail.com>
Date: Fri, 15 Sep 2023 11:42:57 +0300
Subject: [PATCH 5/7] little fix

---
 src/components/LanguageSelector.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index 69248bb..8b6559d 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -16,11 +16,13 @@ const LanguageSelector = () => {
   };
 
   return (
-    <div className="relative hover:shadow-lg dark:hover:shadow-custom-dark duration-200 p-4 tablet:py-6 flex border-x border-elements-light dark:border-elements-dark">
+    <div
+    onClick={toggleMenu}
+    className="cursor-pointer relative hover:shadow-lg dark:hover:shadow-custom-dark duration-200 p-4 tablet:p-6 flex border-x border-elements-light dark:border-elements-dark"
+    >
       <button
         type="button"
         className="text-sm font-semibold text-gray-900 dark:text-white-light items-center justify-center h-4 w-4"
-        onClick={toggleMenu}
       >
         <FiGlobe className="h-4 w-4" />
       </button>

From 41b394c020818091bf2a491d735f107c3581e00a Mon Sep 17 00:00:00 2001
From: NazarBaraban <barabannazar44@gmail.com>
Date: Fri, 15 Sep 2023 11:43:46 +0300
Subject: [PATCH 6/7] test

---
 src/components/LanguageSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index 8b6559d..8ae0c52 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -17,8 +17,8 @@ const LanguageSelector = () => {
 
   return (
     <div
-    onClick={toggleMenu}
-    className="cursor-pointer relative hover:shadow-lg dark:hover:shadow-custom-dark duration-200 p-4 tablet:p-6 flex border-x border-elements-light dark:border-elements-dark"
+      onClick={toggleMenu}
+      className="cursor-pointer relative hover:shadow-lg dark:hover:shadow-custom-dark duration-200 p-4 tablet:p-6 flex border-x border-elements-light dark:border-elements-dark"
     >
       <button
         type="button"

From e4f76cc23d104a94003e750968cbb01355537708 Mon Sep 17 00:00:00 2001
From: NazarBaraban <barabannazar44@gmail.com>
Date: Thu, 21 Sep 2023 12:40:49 +0300
Subject: [PATCH 7/7] add map for languages

---
 src/components/LanguageSelector.tsx | 27 ++++++++++-----------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index 8ae0c52..f72b825 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -15,6 +15,8 @@ const LanguageSelector = () => {
     setIsMenuOpen(false);
   };
 
+  const languageCodes = ['en', 'uk', 'ja'];
+
   return (
     <div
       onClick={toggleMenu}
@@ -28,26 +30,17 @@ const LanguageSelector = () => {
       </button>
       {isMenuOpen && (
         <div className="absolute left-0 mt-9 tablet:mt-11 flex justify-center mb-2">
-          <div className="flex border rounded-lg shadow-md desktop:flex-col flex-row">
-            <button
-              onClick={() => changeLanguage('en')}
-              className="px-3 py-1 tablet:px-4 tablet:py-2 desktop:px-7 text-sm text-gray-900 text-center dark:text-white-light"
-            >
-              EN
-            </button>
+        <div className="flex border rounded-lg shadow-md desktop:flex-col flex-row">
+          {languageCodes.map((code, index) => (
             <button
-              onClick={() => changeLanguage('uk')}
-              className="px-3 py-1 tablet:px-4 tablet:py-2 desktop:px-7  text-sm text-gray-900 text-center dark:text-white-light"
+              key={index}
+              onClick={() => changeLanguage(code)}
+              className={`px-3 py-1 tablet:px-4 tablet:py-2 desktop:px-7 text-sm text-gray-900 text-center dark:text-white-light`}
             >
-              UA
+              {code.toUpperCase()}
             </button>
-            <button
-              onClick={() => changeLanguage('ja')}
-              className="px-3 py-1 tablet:px-4 tablet:py-2 desktop:px-7  text-sm text-gray-900 text-center dark:text-white-light"
-            >
-              JA
-            </button>
-          </div>
+          ))}
+        </div>
         </div>
       )}
     </div>