67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname } from 'next/navigation';
|
|
import { useState } from 'react';
|
|
import { setLocaleAction } from '../app/actions';
|
|
import type { Locale } from '../lib/i18n';
|
|
|
|
type Props = {
|
|
currentLocale: Locale;
|
|
label: string;
|
|
englishLabel: string;
|
|
indonesianLabel: string;
|
|
submitLabel: string;
|
|
variant?: 'default' | 'compact';
|
|
};
|
|
|
|
export function LanguageSwitcher({
|
|
currentLocale,
|
|
label,
|
|
englishLabel,
|
|
indonesianLabel,
|
|
submitLabel,
|
|
variant = 'default',
|
|
}: Props) {
|
|
const pathname = usePathname();
|
|
const [locale, setLocale] = useState<Locale>(currentLocale);
|
|
|
|
if (variant === 'compact') {
|
|
return (
|
|
<form action={setLocaleAction} className="language-switcher language-switcher-compact">
|
|
<input type="hidden" name="redirectPath" value={pathname} />
|
|
<span className="sr-only">{label}</span>
|
|
<button
|
|
type="submit"
|
|
name="locale"
|
|
value="en"
|
|
className={currentLocale === 'en' ? 'is-active' : ''}
|
|
>
|
|
EN
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
name="locale"
|
|
value="id"
|
|
className={currentLocale === 'id' ? 'is-active' : ''}
|
|
>
|
|
ID
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<form action={setLocaleAction} className="language-switcher">
|
|
<input type="hidden" name="redirectPath" value={pathname} />
|
|
<label>
|
|
<span>{label}</span>
|
|
<select name="locale" value={locale} onChange={(event) => setLocale(event.target.value as Locale)}>
|
|
<option value="id">{indonesianLabel}</option>
|
|
<option value="en">{englishLabel}</option>
|
|
</select>
|
|
</label>
|
|
<button type="submit">{submitLabel}</button>
|
|
</form>
|
|
);
|
|
}
|