build(1.0.0): update translations

NeiruBugz · NeiruBugz · commit 6ff3f486b541 · 2023-03-03T00:58:13.000+04:00
diff --git a/src/app/index.scss b/src/app/index.scss
@@ -23,7 +23,7 @@
 #root {
   height: 100vh;
   width: 100%;
-  padding: 2rem;
+  padding: 1rem;
 }
 
 body {
diff --git a/src/entities/game/ui/card/index.tsx b/src/entities/game/ui/card/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Divider, Tag } from '@widgets';
 import { deleteGameDocument, updateGameDocument } from '@shared';
@@ -23,6 +24,7 @@ const MENU_OPTIONS = [
 ];
 
 const GameCard: FC<GameProps> = ({ id, title, platform, img, status }) => {
+  const { t } = useTranslation();
   const [showDeleteAlert, setShowAlert] = useState<boolean>(false);
 
   const onAlertClick: MouseEventHandler<HTMLButtonElement> = (event) => {
@@ -71,22 +73,22 @@ const GameCard: FC<GameProps> = ({ id, title, platform, img, status }) => {
                     d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                   />
                 </svg>
-                <span>Are you sure about that?</span>
+                <span>{t('games-list.cardMenu.deleteAlertText')}</span>
               </div>
               <div className="flex-none">
                 <button
                   className="btn btn-sm btn-ghost"
                   data-action="cancel"
                   onClick={onAlertClick}
                 >
-                  Cancel
+                  {t('games-list.cardMenu.cancelDelete')}
                 </button>
                 <button
                   className="btn btn-sm btn-primary"
                   data-action="submit"
                   onClick={onAlertClick}
                 >
-                  I really want to delete it
+                  {t('games-list.cardMenu.confirmDelete')}
                 </button>
               </div>
             </div>
@@ -118,27 +120,29 @@ const GameCard: FC<GameProps> = ({ id, title, platform, img, status }) => {
               tabIndex={0}
               className="menu menu-compact dropdown-content mt-3 p-2 shadow w-52 bg-primary-content text-primary"
             >
-              <Divider>Statuses</Divider>
+              <Divider>{t('games-list.cardMenu.statuses')}</Divider>
               {MENU_OPTIONS.filter((option) => option.key !== status).map((option) => (
                 <li
                   key={option.key}
                   data-key={option.key}
                   onClick={onStatusChange}
                   className="hover:bg-primary-focus hover:text-primary-content rounded-none bg-primary-content p-2"
                 >
-                  {option.label}
+                  {t(`games-list.cardMenu.${option.key}`)}
                 </li>
               ))}
-              <Divider>Actions</Divider>
+              <Divider>{t('games-list.cardMenu.actions')}</Divider>
               <li>
                 <button className="btn btn-warning" onClick={onDeleteClick}>
-                  Delete
+                  {t('games-list.cardMenu.delete')}
                 </button>
               </li>
             </ul>
           </div>
-          <h2 className="card-title">{title}</h2>
-          <Tag platform={platform} />
+          <div className="absolute left-4 bottom-6">
+            <h2 className="card-title mb-2">{title}</h2>
+            <Tag platform={platform} />
+          </div>
         </div>
       </div>
     </>
diff --git a/src/pages/add-game/constants.ts b/src/pages/add-game/constants.ts
@@ -37,10 +37,7 @@ const translateStatus = (
   cb: (value: string) => string
 ) => {
   const withTranslation = { ...statusItem };
-  withTranslation.label =
-    withTranslation.value === 'in-progress'
-      ? cb('common.inProgress')
-      : cb(`common.${withTranslation.value}`);
+  withTranslation.label = cb(`common.${withTranslation.value}`);
   return withTranslation;
 };
 
diff --git a/src/pages/add-game/index.tsx b/src/pages/add-game/index.tsx
@@ -112,7 +112,7 @@ const AddGame = (): JSX.Element => {
               <input
                 {...field}
                 id="title"
-                placeholder="Enter game title"
+                placeholder={t('add-game.titlePlaceholder') ?? ''}
                 autoComplete="off"
                 value={inputValue}
                 onChange={onInputChange}
diff --git a/src/shared/i18n/en.json b/src/shared/i18n/en.json
@@ -1,9 +1,20 @@
 {
+  "themes": {
+    "light": "light",
+    "dark": "dark",
+    "emerald": "emerald",
+    "corporate": "corporate",
+    "synthwave": "synthwave",
+    "cyberpunk": "cyberpunk",
+    "pastel": "pastel",
+    "fantasy": "fantasy"
+  },
   "common": {
     "backlog": "Backlog",
-    "inProgress": "In Progress",
+    "in-progress": "In Progress",
     "completed": "Completed",
-    "addGame": "Add Game"
+    "addGame": "Add Game",
+    "theme": "Theme"
   },
   "validation": {
     "gameTitle": "Please input game title!",
@@ -43,7 +54,8 @@
       "title": "Game title",
       "platform": "Platform",
       "status": "Status"
-    }
+    },
+    "titlePlaceholder": "Enter game title"
   },
   "games-list": {
     "motto": "There are no games",
@@ -72,6 +84,17 @@
         "hours_few": "{{count}} hours",
         "hours_many": "{{count}} hours"
       }
+    },
+    "cardMenu": {
+      "statuses": "Statuses",
+      "toBacklog": "To Backlog",
+      "in-progress": "Start",
+      "completed": "Complete",
+      "actions": "Actions",
+      "delete": "Delete",
+      "deleteAlertText": "Are you sure about that?",
+      "cancelDelete": "Cancel",
+      "confirmDelete": "Delete"
     }
   },
   "auth": {
diff --git a/src/shared/i18n/ru.json b/src/shared/i18n/ru.json
@@ -1,9 +1,20 @@
 {
+  "themes": {
+    "light": "Светлая",
+    "dark": "Темная",
+    "emerald": "Изумруд",
+    "corporate": "Корпо",
+    "synthwave": "Синтвейв",
+    "cyberpunk": "Киберпанк",
+    "pastel": "Пастель",
+    "fantasy": "Фентези"
+  },
   "common": {
     "backlog": "Бэклог",
-    "inProgress": "В процессе",
+    "in-progress": "В процессе",
     "completed": "Пройдено",
-    "addGame": "Добавить игру"
+    "addGame": "Добавить игру",
+    "theme": "Тема"
   },
   "validation": {
     "gameTitle": "Пожалуйста, введите название игры",
@@ -43,7 +54,8 @@
       "title": "Название игры",
       "platform": "Платформа",
       "status": "Статус"
-    }
+    },
+    "titlePlaceholder": "Введите название игры"
   },
   "games-list": {
     "motto": "Игр не найдено",
@@ -72,6 +84,17 @@
         "hours_few": "{{count}} ч",
         "hours_many": "{{count}} ч"
       }
+    },
+    "cardMenu": {
+      "statuses": "Статусы",
+      "backlog": "В бэклог",
+      "in-progress": "Начать",
+      "completed": "Пройдено",
+      "actions": "Действия",
+      "delete": "Удалить",
+      "deleteAlertText": "Вы уверены?",
+      "cancelDelete": "Отмена",
+      "confirmDelete": "Удалить"
     }
   },
   "auth": {
diff --git a/src/widgets/header/index.tsx b/src/widgets/header/index.tsx
@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
-import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useSignOut } from 'react-firebase-hooks/auth';
 import { useStore } from '@nanostores/react';
 
 import { User } from '@entities';
 import { DropdownWidget } from '@widgets';
-import { getLanguageLabel, firebaseAuth } from '@shared';
+import { getLanguageLabel, firebaseAuth, capitalize } from '@shared';
 import { nanoLogout, nanoUser } from 'entities/user/slice/index';
+import { Navbar } from './navbar';
 
 const LanguageItems = [
   {
@@ -31,9 +31,9 @@ const themes = [
   'fantasy',
 ];
 
-const createThemeOptions = (): { key: string; label: string }[] => {
+const createThemeOptions = (translateCb: (key: string) => string): { key: string; label: string }[] => {
   const themesOptions: { key: string; label: string }[] = [];
-  themes.map((theme) => themesOptions.push({ key: theme, label: theme }));
+  themes.map((theme) => themesOptions.push({ key: theme, label: capitalize(translateCb(`themes.${theme}`)) }));
   return themesOptions;
 };
 
@@ -70,59 +70,15 @@ const Header = (): JSX.Element => {
 
   return (
     <header className="flex justify-between mb-6">
-      <nav className="navbar flex items-center">
-        <div className="navbar-start">
-          <div className="dropdown">
-            <label tabIndex={0} className="btn btn-ghost">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M4 6h16M4 12h8m-8 6h16"
-                />
-              </svg>
-            </label>
-            <ul
-              tabIndex={0}
-              className="menu menu-compact dropdown-content mt-3 p-2 shadow rounded-box w-52 bg-primary-content text-primary"
-            >
-              <li className="hover:bg-primary-focus hover:text-primary-content rounded-none">
-                <Link to="/">
-                  Backlog App
-                </Link>
-              </li>
-              {user.authorized ? (
-                <li className="hover:bg-primary-focus hover:text-primary-content rounded-none">
-                  <Link to="/list">
-                    {t('home.header.navigation.games')}
-                  </Link>
-                </li>
-              ) : (
-                <li className="hover:bg-primary-focus hover:text-primary-content rounded-none">
-                  <Link to="/auth">
-                    {t('home.header.navigation.login')}
-                  </Link>
-                </li>
-              )}
-            </ul>
-          </div>
-        </div>
-      </nav>
+      <Navbar authorized={user.authorized} />
       <div className="flex">
         {user.authorized ? <User {...user} onLogout={onLogout} /> : null}
         <DropdownWidget
           label={getLanguageLabel(i18n.language)}
           items={LanguageItems}
           onClick={onLanguageSelect}
         />
-        <DropdownWidget label="Theme" items={createThemeOptions()} onClick={onThemeChange} />
+        <DropdownWidget label={t('common.theme')} items={createThemeOptions(t)} onClick={onThemeChange} />
       </div>
     </header>
   );
diff --git a/src/widgets/header/navbar.tsx b/src/widgets/header/navbar.tsx
@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import type { FC } from 'react';
+
+const Navbar: FC<{ authorized: boolean }> = ({ authorized }) => {
+  const { t } = useTranslation();
+  return (
+    <nav className="navbar flex items-center">
+      <div className="navbar-start">
+        <div className="dropdown">
+          <label tabIndex={0} className="btn btn-ghost">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 6h16M4 12h8m-8 6h16"
+              />
+            </svg>
+          </label>
+          <ul
+            tabIndex={0}
+            className="menu menu-compact dropdown-content mt-3 p-2 shadow rounded-box w-52 bg-primary-content text-primary"
+          >
+            <li className="hover:bg-primary-focus hover:text-primary-content rounded-none">
+              <Link to="/">Backlog App</Link>
+            </li>
+            {authorized ? (
+              <li className="hover:bg-primary-focus hover:text-primary-content rounded-none">
+                <Link to="/list">{t('home.header.navigation.games')}</Link>
+              </li>
+            ) : (
+              <li className="hover:bg-primary-focus hover:text-primary-content rounded-none">
+                <Link to="/auth">{t('home.header.navigation.login')}</Link>
+              </li>
+            )}
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export { Navbar };
diff --git a/src/widgets/list/index.tsx b/src/widgets/list/index.tsx
diff --git a/src/widgets/search-results/index.tsx b/src/widgets/search-results/index.tsx
diff --git a/src/widgets/tag/index.tsx b/src/widgets/tag/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`#root {`
`24`	`24`	`height: 100vh;`
`25`	`25`	`width: 100%;`
`26`		`- padding: 2rem;`
	`26`	`+ padding: 1rem;`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`body {`