61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
|
|
import { Lang, languages } from "@/constants/languages"
|
|
|
|
import styles from "./mobile.module.css"
|
|
|
|
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
|
|
|
|
export default function Mobile({
|
|
currentLanguage,
|
|
urls,
|
|
}: LanguageSwitcherProps) {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
function toggleOpen() {
|
|
setIsOpen((prevIsOpen) => !prevIsOpen)
|
|
}
|
|
const urlKeys = Object.keys(urls)
|
|
|
|
if (urlKeys.length === 1 && urlKeys[0] === currentLanguage) {
|
|
return (
|
|
<div className={styles.languageSwitcher}>
|
|
{languages[currentLanguage]}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<section className={styles.mobile}>
|
|
<div>
|
|
<button
|
|
aria-pressed="false"
|
|
className={styles.toggle}
|
|
onClick={toggleOpen}
|
|
>
|
|
{languages[currentLanguage]}{" "}
|
|
<span
|
|
className={`${styles.arrow} ${isOpen ? styles.open : ""}`}
|
|
></span>
|
|
<span className={styles.hiddenAccessible}>Choose language</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}>
|
|
<a href={url} className={styles.link}>
|
|
{languages[key as Lang]}
|
|
</a>
|
|
</li>
|
|
)
|
|
}
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|