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
82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { usePathname } from "next/navigation"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { languages } from "@/constants/languages"
|
|
import { env } from "@/env/client"
|
|
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import { replaceUrlPart } from "./utils"
|
|
|
|
import styles from "./languageSwitcherContent.module.css"
|
|
|
|
import type { Lang } from "@scandic-hotels/common/constants/language"
|
|
|
|
import type { LanguageSwitcherContentProps } from "@/types/components/languageSwitcher/languageSwitcher"
|
|
|
|
export default function LanguageSwitcherContent({
|
|
urls,
|
|
onLanguageSwitch,
|
|
}: LanguageSwitcherContentProps) {
|
|
const intl = useIntl()
|
|
const currentLanguage = useLang()
|
|
|
|
const urlKeys = Object.keys(urls) as Lang[]
|
|
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<div className={styles.languageWrapper}>
|
|
<Subtitle className={styles.subtitle} type="two">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Select your language",
|
|
})}
|
|
</Subtitle>
|
|
<ul className={styles.list}>
|
|
{urlKeys.map((key) => {
|
|
const url = urls[key]?.url
|
|
const isActive = currentLanguage === key
|
|
|
|
if (url) {
|
|
return (
|
|
<li key={key}>
|
|
<Typography
|
|
variant={
|
|
isActive
|
|
? "Body/Paragraph/mdBold"
|
|
: "Body/Paragraph/mdRegular"
|
|
}
|
|
>
|
|
<Link
|
|
className={styles.link}
|
|
href={replaceUrlPart(pathname, url)}
|
|
rel={env.isLangLive(key) ? undefined : "nofollow"}
|
|
onClick={() => onLanguageSwitch(key)}
|
|
variant="languageSwitcher"
|
|
keepSearchParams
|
|
>
|
|
{languages[key]}
|
|
{isActive ? (
|
|
<MaterialIcon
|
|
icon="check"
|
|
color="Icon/Interactive/Default"
|
|
/>
|
|
) : null}
|
|
</Link>
|
|
</Typography>
|
|
</li>
|
|
)
|
|
}
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|