846fd904a6
feat(SW-2859): Create trpc package * Add isEdge, safeTry and dataCache to new common package * Add eslint and move prettier config * Clean up tests * Create trpc package and move initialization * Move errors and a few procedures * Move telemetry to common package * Move tokenManager to common package * Add Sentry to procedures * Clean up procedures * Fix self-referencing imports * Add exports to packages and lint rule to prevent relative imports * Add env to trpc package * Add eslint to trpc package * Apply lint rules * Use direct imports from trpc package * Add lint-staged config to trpc * Move lang enum to common * Restructure trpc package folder structure * Fix lang imports Approved-by: Linus Flood
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
|
|
|
"use client"
|
|
import { useState } from "react"
|
|
|
|
import { languages } from "@/constants/languages"
|
|
import { env } from "@/env/client"
|
|
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./mobile.module.css"
|
|
|
|
import type { Lang } from "@scandic-hotels/common/constants/language"
|
|
|
|
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}
|
|
rel={env.isLangLive(key as Lang) ? undefined : "nofollow"}
|
|
>
|
|
{languages[key as Lang]}
|
|
</a>
|
|
</li>
|
|
)
|
|
}
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|