cubetiq/verdaccio-ui
1
0
Fork 0
forked from sombochea/verdaccio-ui
Code Issues Pull Requests Releases Wiki Activity

feat(i18n): added i18next for user interface translations (#432)

Browse Source
This commit is contained in:
Priscila Oliveira
2020-03-08 16:45:07 +01:00
committed by GitHub
parent 8d4b3cee7e
commit 7428384b55
76 changed files with 1114 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/Footer/Footer.tsx
View File

@@ -1,53 +1,38 @@
import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { goToVerdaccioWebsite } from '../../utils/windows';
import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
const renderTooltip = (): JSX.Element => (
<ToolTip>
<Earth name="earth" size="md" />
<Flags>
<Flag name="spain" size="md" />
<Flag name="nicaragua" size="md" />
<Flag name="india" size="md" />
<Flag name="brazil" size="md" />
<Flag name="china" size="md" />
<Flag name="austria" size="md" />
</Flags>
</ToolTip>
);
const POWERED_LABEL = 'Powered by';
const MADEWITH_LABEL = ' Made with';
const ON_LABEL = 'on';
const HEARTH_EMOJI = '♥';
const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
/* eslint-disable react/jsx-key */
const Footer: React.FC = () => {
const { t } = useTranslation();
return (
<Right>
{POWERED_LABEL}
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
{`/ ${version}`}
</Right>
<Wrapper>
<Inner>
<Left>
<Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />
<ToolTip>
<Earth name="earth" size="md" />
<Flags>
<Flag name="spain" size="md" />
<Flag name="nicaragua" size="md" />
<Flag name="india" size="md" />
<Flag name="brazil" size="md" />
<Flag name="china" size="md" />
<Flag name="austria" size="md" />
</Flags>
</ToolTip>
</Left>
<Right>
{t('footer.powered-by')}
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
{`/ ${window.VERDACCIO_VERSION}`}
</Right>
</Inner>
</Wrapper>
);
};
const renderLeft = (): JSX.Element => (
<Left>
{MADEWITH_LABEL}
<Love>{HEARTH_EMOJI}</Love>
{ON_LABEL}
{renderTooltip()}
</Left>
);
const Footer: React.FC = () => (
<Wrapper>
<Inner>
{renderLeft()}
{renderRight()}
</Inner>
</Wrapper>
);
export default Footer;

4
src/components/Footer/__snapshots__/Footer.test.tsx.snap
View File

@@ -167,13 +167,13 @@ exports[`<Footer /> component should load the initial state of Footer component
<div
class="emotion-27 emotion-28"
>
Made with
Made with
<span
class="emotion-0 emotion-1"
>
♥
</span>
on
on
<span
class="emotion-25 emotion-26"
>