99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
"use client"
|
|
import { useCallback, useEffect, useRef, useState } from "react"
|
|
|
|
import { type Lang, languages } from "@/constants/languages"
|
|
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./desktop.module.css"
|
|
|
|
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
|
|
|
|
export default function Desktop({ urls }: LanguageSwitcherProps) {
|
|
const currentLanguage = useLang()
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const divRef = useRef<HTMLDivElement>(null)
|
|
|
|
function toggleOpen() {
|
|
setIsOpen((prevIsOpen) => !prevIsOpen)
|
|
}
|
|
|
|
const close = useCallback(() => {
|
|
setIsOpen(false)
|
|
}, [setIsOpen])
|
|
|
|
useEffect(() => {
|
|
function handleClickOutside(evt: Event) {
|
|
const target = evt.target as HTMLElement
|
|
if (divRef.current && target && !divRef.current.contains(target)) {
|
|
close()
|
|
}
|
|
}
|
|
|
|
if (divRef.current) {
|
|
document.addEventListener("click", handleClickOutside, false)
|
|
}
|
|
return () => {
|
|
document.removeEventListener("click", handleClickOutside, false)
|
|
}
|
|
}, [close])
|
|
|
|
const urlKeys = Object.keys(urls)
|
|
|
|
if (urlKeys.length === 1 && urlKeys[0] === currentLanguage) {
|
|
return (
|
|
<div className={styles.container} ref={divRef}>
|
|
<section className={styles.languageSwitcher}>
|
|
<svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
|
|
<use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
|
|
</svg>
|
|
{languages[currentLanguage]}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<section className={styles.desktop}>
|
|
<div className={styles.container} ref={divRef}>
|
|
<button
|
|
aria-pressed="false"
|
|
className={styles.toggle}
|
|
onClick={toggleOpen}
|
|
>
|
|
<svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
|
|
<use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
|
|
</svg>
|
|
{languages[currentLanguage]}
|
|
<span className={styles.hiddenAccessible}>Choose language</span>
|
|
<span className={styles.caret}></span>
|
|
</button>
|
|
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
|
|
{urlKeys.map((key) => {
|
|
const url = urls[key as Lang]?.url
|
|
if (url) {
|
|
return (
|
|
<li
|
|
key={key}
|
|
className={`${styles.li} ${currentLanguage === key ? styles.active : ""}`}
|
|
>
|
|
{urls[key as Lang]?.isExternal ? (
|
|
<Link className={styles.link} href={url}>
|
|
{languages[key as Lang]}
|
|
</Link>
|
|
) : (
|
|
<a className={styles.link} href={url}>
|
|
{languages[key as Lang]}
|
|
</a>
|
|
)}
|
|
</li>
|
|
)
|
|
}
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|