uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-08-20 09:58:13 +09:00
Code Issues Releases Activity

feat: add zh-Hant (#120)

Browse Source
This commit is contained in:
uetchy
2020-07-31 11:32:54 +09:00
committed by GitHub
parent 815e29dddf
commit e1b2e6f41f
6 changed files with 214 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
src/components/Footer.tsx
View File

@@ -9,137 +9,152 @@ import { tablet } from '../util/css';
import Contributors from '../components/Contributors';
const Footer: React.FC = () => {
const { t } = useTranslation();
return (
<Container>
<Pane>
<Title>Language</Title>
<LangBox>
<Links>
<a href="/?lng=en">
<span role="img" aria-label="English">
🇬🇧
</span>
</a>
<a href="/?lng=ja">
<span role="img" aria-label="Japanese">
🇯🇵
</span>
</a>
<a href="/?lng=zh-Hans">
<span role="img" aria-label="Simplified Chinese">
🇨🇳
</span>
</a>
</Links>
</LangBox>
</Pane>
<Pane>
<Title>Community</Title>
<ul>
<li>
<OutboundLink
to="https://github.com/uetchy/namae"
eventLabel="GitHub Repo"
aria-label="Go to GitHub repository"
target="_blank"
>
GitHub
</OutboundLink>
</li>
<li>
<OutboundLink
to="https://github.com/uetchy/namae/issues"
eventLabel="GitHub Issues"
aria-label="Go to GitHub Issues"
target="_blank"
>
Issues
</OutboundLink>
</li>
<li>
<OutboundLink
to="https://dev.to/uetchy/give-your-app-slick-name-with-namae-dev-5c4h"
eventLabel="Blog article"
aria-label="Go to blog"
target="_blank"
>
Blog Article
</OutboundLink>
</li>
</ul>
<Box>
<Subtitle>Contributors</Subtitle>
<Contributors />
</Box>
</Pane>
<Pane>
<Title>About</Title>
<p>
Made with{' '}
<span role="img" aria-label="coffee">
☕️
</span>{' '}
by{' '}
<OutboundLink
to="https://twitter.com/uechz"
eventLabel="Author Page"
aria-label="Author page"
target="_blank"
>
<Bold>Yasuaki Uechi</Bold>
</OutboundLink>
</p>
<ShareBox>
<Links>
<OutboundLink
to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
`namae — ${t('title')}`,
)}&url=${encodeURIComponent('https://namae.dev')}`}
eventLabel="Tweet"
aria-label="Tweet this page"
target="_blank"
>
<FaTwitter />
</OutboundLink>
<OutboundLink
to="https://www.producthunt.com/posts/namae"
eventLabel="ProductHunt"
aria-label="Go to ProductHunt page"
target="_blank"
>
<FaProductHunt />
</OutboundLink>
<OutboundLink
to="https://github.com/uetchy/namae"
eventLabel="GitHub Repo"
aria-label="Go to GitHub repository"
target="_blank"
>
<FaGithub />
</OutboundLink>
<OutboundLink
to="https://github.com/sponsors/uetchy"
eventLabel="GitHub Sponsors"
aria-label="Go to GitHub Sponsors"
target="_blank"
>
<SponsorBadge>
<GoHeart size="1.3rem" />
<span>Sponsor</span>
</SponsorBadge>
</OutboundLink>
</Links>
</ShareBox>
</Pane>
<Languages />
<Community />
<About />
</Container>
);
};
export default Footer;
const Languages = () => {
const { t } = useTranslation();
return (
<Pane>
<Title>{t('language')}</Title>
<ul>
<li>
<a href="/?lng=en">English</a>
</li>
<li>
<a href="/?lng=ja">日本語</a>
</li>
<li>
<a href="/?lng=zh-Hans">简体中文</a>
</li>
<li>
<a href="/?lng=zh-Hant">繁体中文</a>
</li>
</ul>
</Pane>
);
};
const Community = () => {
const { t } = useTranslation();
return (
<Pane>
<Title>{t('community')}</Title>
<ul>
<li>
<OutboundLink
to="https://github.com/uetchy/namae"
eventLabel="GitHub Repo"
aria-label="Go to GitHub repository"
target="_blank"
>
GitHub
</OutboundLink>
</li>
<li>
<OutboundLink
to="https://github.com/uetchy/namae/issues"
eventLabel="GitHub Issues"
aria-label="Go to GitHub Issues"
target="_blank"
>
{t('issues')}
</OutboundLink>
</li>
<li>
<OutboundLink
to="https://dev.to/uetchy/give-your-app-slick-name-with-namae-dev-5c4h"
eventLabel="Blog article"
aria-label="Go to blog"
target="_blank"
>
{t('blog')}
</OutboundLink>
</li>
</ul>
<Box>
<Subtitle>{t('contributors')}</Subtitle>
<Contributors />
</Box>
</Pane>
);
};
const About = () => {
const { t } = useTranslation();
return (
<Pane>
<Title>{t('about')}</Title>
<p>
Made with{' '}
<span role="img" aria-label="coffee">
☕️
</span>{' '}
by{' '}
<OutboundLink
to="https://twitter.com/uechz"
eventLabel="Author Page"
aria-label="Author page"
target="_blank"
>
<Bold>Yasuaki Uechi</Bold>
</OutboundLink>
</p>
<ShareBox>
<Links>
<OutboundLink
to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
`namae — ${t('title')}`,
)}&url=${encodeURIComponent('https://namae.dev')}`}
eventLabel="Tweet"
aria-label="Tweet this page"
target="_blank"
>
<FaTwitter />
</OutboundLink>
<OutboundLink
to="https://www.producthunt.com/posts/namae"
eventLabel="ProductHunt"
aria-label="Go to ProductHunt page"
target="_blank"
>
<FaProductHunt />
</OutboundLink>
<OutboundLink
to="https://github.com/uetchy/namae"
eventLabel="GitHub Repo"
aria-label="Go to GitHub repository"
target="_blank"
>
<FaGithub />
</OutboundLink>
<OutboundLink
to="https://github.com/sponsors/uetchy"
eventLabel="GitHub Sponsors"
aria-label="Go to GitHub Sponsors"
target="_blank"
>
<SponsorBadge>
<GoHeart size="1.3rem" />
<span>Sponsor</span>
</SponsorBadge>
</OutboundLink>
</Links>
</ShareBox>
</Pane>
);
};
const Container = styled(Section)`
--text: #bdbdbd;
--background: #404040;
@@ -197,17 +212,6 @@ const Links = styled.div`
}
`;
const LangBox = styled.div`
line-height: 1em;
font-size: 2rem;
${Links} {
a {
margin-right: 5px;
}
}
`;
const ShareBox = styled.div`
margin-top: 15px;
line-height: 1em;