39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
|
import { Globe } from 'lucide-react';
|
|
|
|
type Language = 'en' | 'es' | 'fr';
|
|
|
|
const languages: { value: Language; label: string; flag: string }[] = [
|
|
{ value: 'en', label: 'English', flag: '🇺🇸' },
|
|
{ value: 'es', label: 'Español', flag: '🇪🇸' },
|
|
{ value: 'fr', label: 'Français', flag: '🇫🇷' }
|
|
];
|
|
|
|
const LanguageSelector = () => {
|
|
const { language, setLanguage } = useLanguage();
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Globe className="h-4 w-4 text-muted-foreground" />
|
|
<Select value={language} onValueChange={(value) => setLanguage(value as Language)}>
|
|
<SelectTrigger className="w-[180px]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent className="bg-white z-[100]">
|
|
{languages.map((lang) => (
|
|
<SelectItem key={lang.value} value={lang.value}>
|
|
<span className="flex items-center gap-2">
|
|
<span>{lang.flag}</span>
|
|
<span>{lang.label}</span>
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LanguageSelector;
|