This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
website/components/Header/Language/Language.tsx

78 lines
2.2 KiB
TypeScript

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<LanguageProps> = (props) => {
const { className } = props
const { lang: currentLanguage } = useTranslation()
const [hiddenMenu, setHiddenMenu] = useState(true)
const languageClickRef = useRef<HTMLDivElement | null>(null)
const handleHiddenMenu = useCallback(() => {
setHiddenMenu((oldHiddenMenu) => {
return !oldHiddenMenu
})
}, [])
useClickOutsideAlerter(languageClickRef, () => {
return setHiddenMenu(true)
})
const handleLanguage = async (language: string): Promise<void> => {
await setLanguage(language)
handleHiddenMenu()
}
return (
<div
className="relative flex cursor-pointer flex-col items-center justify-center"
ref={languageClickRef}
>
<div
data-cy="language-click"
className="mr-5 flex items-center"
onClick={handleHiddenMenu}
>
<LanguageFlag language={currentLanguage} />
<Arrow />
</div>
<ul
data-cy="languages-list"
className={classNames(
className,
"absolute top-16 z-10 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 () => {
return await handleLanguage(language)
}}
>
<LanguageFlag language={language} />
</li>
)
})}
</ul>
</div>
)
}