granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Localize headers

Browse source
This commit is contained in:
Justin Edmund 2022-03-04 17:56:37 -08:00
parent 62edc6ca5c
commit 703c9f4d49
2 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
components/BottomHeader/index.tsx
View file

@ -2,6 +2,8 @@ import React from 'react'
import { useRouter } from 'next/router'
import { useCookies } from 'react-cookie'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import clonedeep from 'lodash.clonedeep'
import * as Scroll from 'react-scroll'
@ -11,15 +13,13 @@ import Header from '~components/Header'
import Button from '~components/Button'
import api from '~utils/api'
import { accountState } from '~utils/accountState'
import { appState, initialAppState } from '~utils/appState'
import { ButtonType } from '~utils/enums'
import CrossIcon from '~public/icons/Cross.svg'
import { route } from 'next/dist/server/router'
const BottomHeader = () => {
const account = useSnapshot(accountState)
const { t } = useTranslation('common')
const app = useSnapshot(appState)
const router = useRouter()
@ -67,9 +67,9 @@ const BottomHeader = () => {
const leftNav = () => {
if (router.pathname === '/p/[party]' || router.pathname === '/new') {
if (app.party.detailsVisible) {
return (<Button icon="edit" active={true} onClick={toggleDetails}>Hide info</Button>)
return (<Button icon="edit" active={true} onClick={toggleDetails}>{t('buttons.hide_info')}</Button>)
} else {
return (<Button icon="edit" onClick={toggleDetails}>Edit info</Button>)
return (<Button icon="edit" onClick={toggleDetails}>{t('buttons.show_info')}</Button>)
}
} else {
return (<div />)
@ -84,20 +84,20 @@ const BottomHeader = () => {
<span className='icon'>
<CrossIcon />
</span>
<span className="text">Delete team</span>
<span className="text">{t('buttons.delete')}</span>
</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className="Overlay" />
<AlertDialog.Content className="Dialog">
<AlertDialog.Title className="DialogTitle">
Delete team
{t('delete_team.title')}
</AlertDialog.Title>
<AlertDialog.Description className="DialogDescription">
Are you sure you want to permanently delete this team?
{t('delete_team.description')}
</AlertDialog.Description>
<div className="actions">
<AlertDialog.Cancel className="Button modal">Nevermind</AlertDialog.Cancel>
<AlertDialog.Action className="Button modal destructive" onClick={(e) => deleteTeam(e)}>Yes, delete</AlertDialog.Action>
<AlertDialog.Cancel className="Button modal">{t('delete_team.buttons.cancel')}</AlertDialog.Cancel>
<AlertDialog.Action className="Button modal destructive" onClick={(e) => deleteTeam(e)}>{t('delete_team.buttons.confirm')}</AlertDialog.Action>
</div>
</AlertDialog.Content>
</AlertDialog.Portal>

12
components/TopHeader/index.tsx
View file

@ -1,8 +1,10 @@
import React, { useEffect } from 'react'
import { useSnapshot } from 'valtio'
import { useCookies } from 'react-cookie'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import clonedeep from 'lodash.clonedeep'
import { useSnapshot } from 'valtio'
import api from '~utils/api'
import { accountState, initialAccountState } from '~utils/accountState'
@ -13,6 +15,8 @@ import Button from '~components/Button'
import HeaderMenu from '~components/HeaderMenu'
const TopHeader = () => {
const { t } = useTranslation('common')
// Cookies
const [accountCookies, setAccountCookie, removeAccountCookie] = useCookies(['account'])
const [userCookies, setUserCookies, removeUserCookie] = useCookies(['user'])
@ -100,7 +104,7 @@ const TopHeader = () => {
const leftNav = () => {
return (
<div className="dropdown">
<Button icon="menu">Menu</Button>
<Button icon="menu">{t('buttons.menu')}</Button>
{ (account.user) ?
<HeaderMenu authenticated={account.authorized} username={account.user.username} logout={logout} /> :
<HeaderMenu authenticated={account.authorized} />
@ -123,9 +127,9 @@ const TopHeader = () => {
saveButton() : ''
}
{ (router.route === '/p/[party]') ?
<Button icon="link" onClick={copyToClipboard}>Copy link</Button> : ''
<Button icon="link" onClick={copyToClipboard}>{t('buttons.copy')}</Button> : ''
}
<Button icon="new" onClick={newParty}>New</Button>
<Button icon="new" onClick={newParty}>{t('buttons.new')}</Button>
</div>
)
}