import React, { useState, useRef } from 'react'; import classNames from 'classnames'; import Head from 'next/head'; import Menu from 'components/common/Menu'; import Button from 'components/common/Button'; import { menuOptions } from 'lib/lang'; import useLocale from 'hooks/useLocale'; import useDocumentClick from 'hooks/useDocumentClick'; import Globe from 'assets/globe.svg'; import styles from './LanguageButton.module.css'; export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) { const [showMenu, setShowMenu] = useState(false); const [locale, setLocale] = useLocale(); const ref = useRef(); const selectedLocale = menuOptions.find(e => e.value === locale)?.display; function handleSelect(value) { setLocale(value); setShowMenu(false); } function toggleMenu() { setShowMenu(state => !state); } useDocumentClick(e => { if (!ref.current.contains(e.target)) { setShowMenu(false); } }); return ( <> {locale === 'zh-CN' && ( )} {locale === 'ja-JP' && ( )}

{showMenu && ( )}

); }