42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { Languages } from 'lucide-react';
|
|
import { useI18n, type Language } from '@/i18n/i18n';
|
|
import { cn } from '@/lib/cn';
|
|
|
|
const languages: Array<{ value: Language; label: string }> = [
|
|
{ value: 'ru', label: 'RU' },
|
|
{ value: 'en', label: 'EN' },
|
|
];
|
|
|
|
export function LanguageSwitcher({ className }: { className?: string }) {
|
|
const { language, setLanguage, t } = useI18n();
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'inline-flex items-center gap-1 rounded-md border border-border bg-surface/90 p-1 text-xs shadow-card',
|
|
className,
|
|
)}
|
|
aria-label={t('language.switch')}
|
|
>
|
|
<Languages className="ml-1 h-3.5 w-3.5 text-muted" aria-hidden />
|
|
{languages.map((item) => (
|
|
<button
|
|
key={item.value}
|
|
type="button"
|
|
onClick={() => setLanguage(item.value)}
|
|
className={cn(
|
|
'rounded px-2 py-1 font-semibold transition-colors',
|
|
language === item.value
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'text-muted hover:bg-surface-muted hover:text-ink',
|
|
)}
|
|
aria-pressed={language === item.value}
|
|
title={item.value === 'ru' ? t('language.ru') : t('language.en')}
|
|
>
|
|
{item.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|