From b91d84028f39ebd66f37c29a8424aec151abcde1 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 4 Mar 2022 18:42:06 -0800 Subject: [PATCH] Add localization for header menus/some modals --- components/AboutModal/index.tsx | 7 +++- components/AccountModal/index.scss | 4 ++ components/AccountModal/index.tsx | 27 ++++++++----- components/BottomHeader/index.tsx | 8 ++-- components/HeaderMenu/index.tsx | 23 ++++++----- public/locales/en/common.json | 63 +++++++++++++++++++++++++++++ public/locales/ja/common.json | 64 ++++++++++++++++++++++++++++++ 7 files changed, 170 insertions(+), 26 deletions(-) create mode 100644 public/locales/en/common.json create mode 100644 public/locales/ja/common.json diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx index 79cd547a..501f0122 100644 --- a/components/AboutModal/index.tsx +++ b/components/AboutModal/index.tsx @@ -1,21 +1,24 @@ import React from 'react' +import { useTranslation } from 'next-i18next' import * as Dialog from '@radix-ui/react-dialog' import CrossIcon from '~public/icons/Cross.svg' import './index.scss' const AboutModal = () => { + const { t } = useTranslation('common') + return (
  • - About + {t('modals.about.title')}
    • event.preventDefault() }>
    - About + {t('menu.about')} diff --git a/components/AccountModal/index.scss b/components/AccountModal/index.scss index 81371cce..3762c2bb 100644 --- a/components/AccountModal/index.scss +++ b/components/AccountModal/index.scss @@ -98,6 +98,10 @@ font-size: $font-small; line-height: 1.1; max-width: 300px; + + &.jp { + max-width: 270px; + } } } diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx index a3129c20..9868ed14 100644 --- a/components/AccountModal/index.tsx +++ b/components/AccountModal/index.tsx @@ -1,6 +1,8 @@ import React, { useEffect, useState } from 'react' import { useCookies } from 'react-cookie' +import { useRouter } from 'next/router' import { useSnapshot } from 'valtio' +import { useTranslation } from 'next-i18next' import * as Dialog from '@radix-ui/react-dialog' import * as Switch from '@radix-ui/react-switch' @@ -15,8 +17,13 @@ import CrossIcon from '~public/icons/Cross.svg' import './index.scss' const AccountModal = () => { + const { t } = useTranslation('common') + const { account } = useSnapshot(accountState) + const router = useRouter() + const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en' + // Cookies const [accountCookies] = useCookies(['account']) const [userCookies, setUserCookies] = useCookies(['user']) @@ -46,7 +53,7 @@ const AccountModal = () => { const pictureOptions = ( pictureData.sort((a, b) => (a.name.en > b.name.en) ? 1 : -1).map((item, i) => { return ( - + ) }) ) @@ -109,14 +116,14 @@ const AccountModal = () => {
  • - Settings + {t('menu.settings')}
    • event.preventDefault() }>
    - Account Settings + {t('modals.settings.title')} @{account.user?.username}
    @@ -129,7 +136,7 @@ const AccountModal = () => {
    - +
    i.filename === picture)?.element}`}> @@ -147,18 +154,18 @@ const AccountModal = () => {
    - +
    - -

    Hide your profile and prevent your grids from showing up in collections

    + +

    {t('modals.settings.descriptions.private')}

    @@ -166,7 +173,7 @@ const AccountModal = () => {
    - + diff --git a/components/BottomHeader/index.tsx b/components/BottomHeader/index.tsx index eaaec479..abcbd7ad 100644 --- a/components/BottomHeader/index.tsx +++ b/components/BottomHeader/index.tsx @@ -90,14 +90,14 @@ const BottomHeader = () => { - {t('delete_team.title')} + {t('modals.delete_team.title')} - {t('delete_team.description')} + {t('modals.delete_team.description')}
    - {t('delete_team.buttons.cancel')} - deleteTeam(e)}>{t('delete_team.buttons.confirm')} + {t('modals.delete_team.buttons.cancel')} + deleteTeam(e)}>{t('modals.delete_team.buttons.confirm')}
    diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx index 8c864238..1b437275 100644 --- a/components/HeaderMenu/index.tsx +++ b/components/HeaderMenu/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import Link from 'next/link' import { useCookies } from 'react-cookie' +import { useTranslation } from 'next-i18next' import AboutModal from '~components/AboutModal' import AccountModal from '~components/AccountModal' @@ -16,6 +17,8 @@ interface Props { } const HeaderMenu = (props: Props) => { + const { t } = useTranslation('common') + const [accountCookies] = useCookies(['account']) const [userCookies] = useCookies(['user']) @@ -35,22 +38,22 @@ const HeaderMenu = (props: Props) => { /profile/${userCookies.user.picture}@2x.png 2x`} src={`/profile/${userCookies.user.picture}.png`} /> -
    +
    +
  • - Saved + {t('menu.saved')}
  • - Teams + {t('menu.teams')}
  • - Guides - Coming Soon + {t('menu.guides')} + {t('coming_soon')}
    • @@ -58,7 +61,7 @@ const HeaderMenu = (props: Props) => {
  • - Logout + {t('menu.logout')}
    • @@ -74,13 +77,13 @@ const HeaderMenu = (props: Props) => {
  • - Teams + {t('menu.teams')}
  • - Guides - Coming Soon + {t('menu.guides')} + {t('menu.logout')}
    • diff --git a/public/locales/en/common.json b/public/locales/en/common.json new file mode 100644 index 00000000..31556df2 --- /dev/null +++ b/public/locales/en/common.json @@ -0,0 +1,63 @@ +{ + "buttons": { + "copy": "Copy link", + "delete": "Delete team", + "edit_info": "Edit info", + "hide_info": "Hide info", + "menu": "Menu", + "new": "New" + }, + "modals": { + "about": { + "title": "About" + }, + "delete_team": { + "title": "Delete team", + "description": "Are you sure you want to permanently delete this team?", + "buttons": { + "confirm": "Yes, delete", + "cancel": "Nevermind" + } + }, + "settings": { + "title": "Account Settings", + "labels": { + "picture": "Picture", + "language": "Language", + "private": "Private" + }, + "descriptions": { + "private": "Hide your profile and prevent your grids from showing up in collections" + }, + "language": { + "english": "English", + "japanese": "Japanese" + }, + "buttons": { + "confirm": "Save settings" + } + } + }, + "menu": { + "about": "About", + "guides": "Guides", + "saved": "Saved", + "settings": "Settings", + "teams": "Teams", + "logout": "Logout" + }, + "party": { + "segmented_control": { + "class": "Class", + "characters": "Characters", + "weapons": "Weapons", + "summons": "Summons" + } + }, + "teams": { + "title": "Discover Teams", + "loading": "Loading teams...", + "not_found": "No teams found" + }, + "coming_soon": "Coming Soon" +} diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json new file mode 100644 index 00000000..e0ce247d --- /dev/null +++ b/public/locales/ja/common.json @@ -0,0 +1,64 @@ +{ + "buttons": { + "copy": "リンクをコピー", + "delete": "編成を削除", + "show_info": "詳細を編集", + "hide_info": "詳細を非表示", + "menu": "メニュー", + "new": "作成" + }, + "modals": { + "about": { + "title": "このサイトについて" + }, + "delete_team": { + "title": "編成を削除しますか", + "description": "編成を削除する操作は取り消せません。", + "buttons": { + "confirm": "削除", + "cancel": "キャンセル" + } + }, + "settings": { + "title": "アカウント設定", + "labels": { + "picture": "プロフィール画像", + "language": "言語", + "private": "プライベート" + }, + "descriptions": { + "private": "プロフィールを隠し、編成をコレクションに表示されないようにします" + }, + "language": { + "english": "英語", + "japanese": "日本語" + }, + "buttons": { + "confirm": "設定を保存する" + } + } + }, + "menu": { + "about": "このサイトについて", + "guides": "攻略", + "saved": "保存した編成", + "settings": "アカウント設定", + "teams": "編成一覧", + "logout": "ログアウト" + }, + "party": { + "segmented_control": { + "class": "ジョブ", + "characters": "キャラ", + "weapons": "武器", + "summons": "召喚石" + } + }, + "teams": { + "title": "編成一覧", + "loading": "ロード中...", + "not_found": "編成は見つかりませんでした" + }, + "coming_soon": "開発中" +} + \ No newline at end of file