root
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { persistLocale } from '@/lib/localization/client';
|
|
import {
|
|
localeSwitchUrl,
|
|
locales,
|
|
routeIdFromPathname,
|
|
type Locale,
|
|
} from '@/lib/localization/config';
|
|
import { usePathname } from 'next/navigation';
|
|
import styles from './Controls.module.css';
|
|
|
|
interface LocaleSelectorProps {
|
|
currentLocale: Locale;
|
|
label: string;
|
|
localeNames: Record<Locale, string>;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export function LocaleSelector({
|
|
currentLocale,
|
|
label,
|
|
localeNames,
|
|
compact = false,
|
|
}: LocaleSelectorProps) {
|
|
const pathname = usePathname();
|
|
const routeId = routeIdFromPathname(pathname) ?? 'home';
|
|
|
|
return (
|
|
<label className={styles.field}>
|
|
<span className={compact ? styles.compactLabel : styles.label}>{label}</span>
|
|
<select
|
|
className={styles.select}
|
|
aria-label={label}
|
|
value={currentLocale}
|
|
onChange={(event) => {
|
|
const targetLocale = event.target.value as Locale;
|
|
persistLocale(targetLocale);
|
|
window.location.assign(
|
|
localeSwitchUrl(new URL(window.location.href), targetLocale, routeId),
|
|
);
|
|
}}
|
|
>
|
|
{locales.map((locale) => (
|
|
<option key={locale} value={locale}>
|
|
{localeNames[locale]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
);
|
|
}
|