2020-09-21 06:31:53 +02:00
|
|
|
import React from 'react';
|
2020-09-11 22:21:17 +02:00
|
|
|
import Head from 'next/head';
|
2020-09-08 04:48:40 +02:00
|
|
|
import { menuOptions } from 'lib/lang';
|
2020-09-17 09:17:11 +02:00
|
|
|
import useLocale from 'hooks/useLocale';
|
2020-09-21 06:31:53 +02:00
|
|
|
import MenuButton from 'components/common/MenuButton';
|
2020-09-17 09:17:11 +02:00
|
|
|
import Globe from 'assets/globe.svg';
|
2020-10-02 21:15:42 +02:00
|
|
|
import styles from './LanguageButton.module.css';
|
2020-09-07 10:22:16 +02:00
|
|
|
|
2020-09-21 06:31:53 +02:00
|
|
|
export default function LanguageButton() {
|
2020-09-09 05:46:31 +02:00
|
|
|
const [locale, setLocale] = useLocale();
|
2020-09-07 10:22:16 +02:00
|
|
|
|
|
|
|
|
function handleSelect(value) {
|
2020-09-09 05:46:31 +02:00
|
|
|
setLocale(value);
|
2020-09-07 10:22:16 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
2020-09-11 22:21:17 +02:00
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
{locale === 'zh-CN' && (
|
|
|
|
|
<link
|
|
|
|
|
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
|
|
|
|
)}
|
2020-09-13 10:26:54 +02:00
|
|
|
{locale === 'ja-JP' && (
|
2020-09-11 22:21:17 +02:00
|
|
|
<link
|
|
|
|
|
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</Head>
|
2020-09-21 06:31:53 +02:00
|
|
|
<MenuButton
|
|
|
|
|
icon={<Globe />}
|
|
|
|
|
options={menuOptions}
|
|
|
|
|
value={locale}
|
2020-10-04 03:05:46 +02:00
|
|
|
menuClassName={styles.menu}
|
2020-09-21 06:31:53 +02:00
|
|
|
renderValue={option => option?.display}
|
|
|
|
|
onSelect={handleSelect}
|
|
|
|
|
/>
|
2020-09-11 22:21:17 +02:00
|
|
|
</>
|
2020-09-07 10:22:16 +02:00
|
|
|
);
|
|
|
|
|
}
|
