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
Raw Permalink Normal View History

import { useCallback, useState, useRef } from "react"
import useTranslation from "next-translate/useTranslation"
import setLanguage from "next-translate/setLanguage"
import classNames from "clsx"
2021-10-24 05:19:39 +02:00
import i18n from "../../../i18n.json"
import { Arrow } from "./Arrow"
import { LanguageFlag } from "./LanguageFlag"
import { useClickOutsideAlerter } from "../../../hooks/useClickOutsideAlerter"
2021-10-24 05:19:39 +02:00
export interface LanguageProps {
className?: string
}
export const Language: React.FC<LanguageProps> = (props) => {
const { className } = props
2021-10-24 05:19:39 +02:00
const { lang: currentLanguage } = useTranslation()
const [hiddenMenu, setHiddenMenu] = useState(true)
2022-05-12 20:35:46 +02:00
const languageClickRef = useRef<HTMLDivElement | null>(null)
2021-10-24 05:19:39 +02:00
2021-10-24 05:48:06 +02:00
const handleHiddenMenu = useCallback(() => {
2022-08-31 21:44:33 +02:00
setHiddenMenu((oldHiddenMenu) => {
return !oldHiddenMenu
})
2022-05-12 20:35:46 +02:00
}, [])
2021-10-24 05:48:06 +02:00
2022-08-31 21:44:33 +02:00
useClickOutsideAlerter(languageClickRef, () => {
return setHiddenMenu(true)
})
2021-10-24 05:19:39 +02:00
2021-10-24 05:48:06 +02:00
const handleLanguage = async (language: string): Promise<void> => {
2021-10-24 05:19:39 +02:00
await setLanguage(language)
handleHiddenMenu()
2021-10-24 05:19:39 +02:00
}
return (
<div
className="relative flex cursor-pointer flex-col items-center justify-center"
ref={languageClickRef}
>
2021-10-24 05:48:06 +02:00
<div
data-cy="language-click"
className="mr-5 flex items-center"
2021-10-24 05:48:06 +02:00
onClick={handleHiddenMenu}
>
<LanguageFlag language={currentLanguage} />
<Arrow />
2021-10-24 05:19:39 +02:00
</div>
2021-10-24 05:48:06 +02:00
<ul
data-cy="languages-list"
2021-10-24 05:48:06 +02:00
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 },
2021-10-24 05:48:06 +02:00
)}
>
{i18n.locales.map((language, index) => {
if (language === currentLanguage) {
return null
2021-10-24 05:19:39 +02:00
}
2021-10-24 05:48:06 +02:00
return (
<li
key={index}
className="flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20"
2022-08-31 21:44:33 +02:00
onClick={async () => {
return await handleLanguage(language)
}}
2021-10-24 05:48:06 +02:00
>
<LanguageFlag language={language} />
</li>
)
})}
</ul>
</div>
2021-10-24 05:19:39 +02:00
)
}