81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import { useCallback, useEffect, 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'
|
|
|
|
export const Language: React.FC = () => {
|
|
const { lang: currentLanguage } = useTranslation()
|
|
const [hiddenMenu, setHiddenMenu] = useState(true)
|
|
const languageClickRef = useRef<HTMLDivElement | null>(null)
|
|
|
|
const handleHiddenMenu = useCallback(() => {
|
|
setHiddenMenu((oldHiddenMenu) => {
|
|
return !oldHiddenMenu
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const handleClickEvent = (event: MouseEvent): void => {
|
|
if (languageClickRef.current == null || event.target == null) {
|
|
return
|
|
}
|
|
if (!languageClickRef.current.contains(event.target as Node)) {
|
|
setHiddenMenu(true)
|
|
}
|
|
}
|
|
|
|
window.document.addEventListener('click', handleClickEvent)
|
|
|
|
return () => {
|
|
return window.removeEventListener('click', handleClickEvent)
|
|
}
|
|
}, [])
|
|
|
|
const handleLanguage = async (language: string): Promise<void> => {
|
|
await setLanguage(language)
|
|
}
|
|
|
|
return (
|
|
<div className='flex cursor-pointer flex-col items-center justify-center'>
|
|
<div
|
|
ref={languageClickRef}
|
|
data-cy='language-click'
|
|
className='mr-5 flex items-center'
|
|
onClick={handleHiddenMenu}
|
|
>
|
|
<LanguageFlag language={currentLanguage} />
|
|
<Arrow />
|
|
</div>
|
|
|
|
<ul
|
|
data-cy='languages-list'
|
|
className={classNames(
|
|
'absolute top-14 z-10 mt-3 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag',
|
|
{ hidden: hiddenMenu }
|
|
)}
|
|
>
|
|
{i18n.locales.map((language, index) => {
|
|
if (language === currentLanguage) {
|
|
return null
|
|
}
|
|
return (
|
|
<li
|
|
key={index}
|
|
className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
|
|
onClick={async () => {
|
|
await handleLanguage(language)
|
|
}}
|
|
>
|
|
<LanguageFlag language={language} />
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|