78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { languages } from "@/constants/languages"
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
|
|
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import LanguageSwitcherContent from "./LanguageSwitcherContent"
|
|
import { languageSwitcherVariants } from "./variants"
|
|
|
|
import styles from "./languageSwitcher.module.css"
|
|
|
|
import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
|
|
|
|
export default function LanguageSwitcher({
|
|
urls,
|
|
type,
|
|
}: LanguageSwitcherProps) {
|
|
const intl = useIntl()
|
|
const currentLanguage = useLang()
|
|
const {
|
|
toggleLanguageSwitcher,
|
|
isHeaderLanguageSwitcherOpen,
|
|
isFooterLanguageSwitcherOpen,
|
|
} = useDropdownStore()
|
|
|
|
const position = type === "footer" ? "footer" : "header"
|
|
const color = type === "footer" ? "pale" : "burgundy"
|
|
const isLanguageSwitcherOpen =
|
|
type === "footer"
|
|
? isFooterLanguageSwitcherOpen
|
|
: isHeaderLanguageSwitcherOpen
|
|
|
|
useHandleKeyUp((event: KeyboardEvent) => {
|
|
if (event.key === "Escape" && isLanguageSwitcherOpen) {
|
|
toggleLanguageSwitcher(position)
|
|
}
|
|
})
|
|
|
|
const classNames = languageSwitcherVariants({ color, position })
|
|
|
|
return (
|
|
<div className={classNames}>
|
|
<button
|
|
type="button"
|
|
className={styles.button}
|
|
aria-label={intl.formatMessage({
|
|
id: isLanguageSwitcherOpen
|
|
? "Close language menu"
|
|
: "Open language menu",
|
|
})}
|
|
onClick={() => toggleLanguageSwitcher(position)}
|
|
>
|
|
<GlobeIcon width={20} height={20} color={color} />
|
|
<span>{languages[currentLanguage]}</span>
|
|
<ChevronDownIcon
|
|
className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
|
|
width={20}
|
|
height={20}
|
|
color={color}
|
|
/>
|
|
</button>
|
|
|
|
<div
|
|
className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
|
|
>
|
|
{isLanguageSwitcherOpen ? (
|
|
<LanguageSwitcherContent urls={urls} type={type} />
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|