import React from 'react'; import Head from 'next/head'; import { menuOptions } from 'lib/lang'; import useLocale from 'hooks/useLocale'; import MenuButton from 'components/common/MenuButton'; import Globe from 'assets/globe.svg'; import styles from './LanguageButton.module.css'; export default function LanguageButton() { const [locale, setLocale] = useLocale(); function handleSelect(value) { setLocale(value); } return ( <> <Head> {locale === 'zh-CN' && ( <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" /> )} {locale === 'zh-TW' && ( <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet" /> )} {locale === 'ja-JP' && ( <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet" /> )} </Head> <MenuButton icon={<Globe />} options={menuOptions} value={locale} menuClassName={styles.menu} renderValue={option => option?.display} onSelect={handleSelect} /> </> ); }