66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { useState } from "react"
|
|
|
|
import { Lang, languages } from "@/constants/languages"
|
|
|
|
import { CheckIcon, ChevronDownIcon, GlobeIcon } from "@/components/Icons"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import TopMenuButton from "../TopMenuButton"
|
|
|
|
import styles from "./languageSwitcher.module.css"
|
|
|
|
import { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
|
|
|
|
export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
|
|
const currentLanguage = useLang()
|
|
const [isExpanded, setIsExpanded] = useState(false)
|
|
|
|
function toggleExpand() {
|
|
setIsExpanded((prev) => !prev)
|
|
}
|
|
|
|
const urlKeys = Object.keys(urls) as Lang[]
|
|
|
|
return (
|
|
<div className={styles.languageSwitcher}>
|
|
<TopMenuButton onClick={toggleExpand}>
|
|
<GlobeIcon width={20} height={20} color="burgundy" />
|
|
<span>{languages[currentLanguage]}</span>
|
|
<ChevronDownIcon
|
|
className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
|
|
width={20}
|
|
height={20}
|
|
color="burgundy"
|
|
/>
|
|
</TopMenuButton>
|
|
<div
|
|
className={`${styles.dropdown} ${isExpanded ? styles.isExpanded : ""}`}
|
|
>
|
|
<ul className={styles.list}>
|
|
{urlKeys.map((key) => {
|
|
const url = urls[key]?.url
|
|
const isActive = currentLanguage === key
|
|
if (url) {
|
|
return (
|
|
<li key={key}>
|
|
<Link
|
|
className={`${styles.link} ${isActive ? styles.active : ""}`}
|
|
color="burgundy"
|
|
href={url}
|
|
>
|
|
{languages[key]}
|
|
{isActive ? <CheckIcon color="burgundy" /> : null}
|
|
</Link>
|
|
</li>
|
|
)
|
|
}
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|