import { useCallback, useState, useRef } from 'react' import useTranslation from 'next-translate/useTranslation' import setLanguage from 'next-translate/setLanguage' import classNames from 'clsx' import i18n from '../../../i18n.json' import { Arrow } from './Arrow' import { LanguageFlag } from './LanguageFlag' import { useClickOutsideAlerter } from '../../../hooks/useClickOutsideAlerter' export interface LanguageProps { className?: string } export const Language: React.FC = (props) => { const { className } = props const { lang: currentLanguage } = useTranslation() const [hiddenMenu, setHiddenMenu] = useState(true) const languageClickRef = useRef(null) const handleHiddenMenu = useCallback(() => { setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu) }, []) useClickOutsideAlerter(languageClickRef, () => setHiddenMenu(true)) const handleLanguage = async (language: string): Promise => { await setLanguage(language) handleHiddenMenu() } return (
    {i18n.locales.map((language, index) => { if (language === currentLanguage) { return null } return (
  • await handleLanguage(language)} >
  • ) })}
) }