44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import type { Locale } from '@/hooks/use-locale';
|
|
import { useLocale } from '@/hooks/use-locale';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const languages: { value: Locale; label: string; name: string }[] = [
|
|
{ value: 'id', label: 'ID', name: 'Bahasa Indonesia' },
|
|
{ value: 'en', label: 'EN', name: 'English' },
|
|
];
|
|
|
|
/** Two-option switch between Indonesian and English. */
|
|
export default function LanguageToggle({ className }: { className?: string }) {
|
|
const { locale, setLocale } = useLocale();
|
|
|
|
return (
|
|
<div
|
|
role="group"
|
|
aria-label="Bahasa / Language"
|
|
className={cn(
|
|
'border-outline-variant/50 bg-surface-container-low inline-flex h-10 items-center gap-0.5 rounded-xl border p-1',
|
|
className,
|
|
)}
|
|
>
|
|
{languages.map((language) => (
|
|
<button
|
|
key={language.value}
|
|
type="button"
|
|
lang={language.value}
|
|
title={language.name}
|
|
aria-pressed={locale === language.value}
|
|
onClick={() => setLocale(language.value)}
|
|
className={cn(
|
|
'h-full cursor-pointer rounded-lg px-2.5 font-mono text-xs font-bold transition-colors',
|
|
locale === language.value
|
|
? 'bg-primary-container text-white'
|
|
: 'text-on-surface-variant hover:text-on-surface',
|
|
)}
|
|
>
|
|
{language.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|