57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
|
|
import { Lang, languages } from "@/constants/languages"
|
|
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./mobile.module.css"
|
|
|
|
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
|
|
|
|
export default function Mobile({ urls }: LanguageSwitcherProps) {
|
|
const currentLanguage = useLang()
|
|
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.toggle}>{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>
|
|
)
|
|
}
|