import { Languages } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { useTranslation, type Language } from '@/contexts/language'; import { cn } from '@/lib/utils'; interface LanguageOption { code: Language; name: string; nativeName: string; flag: string; } const languages: LanguageOption[] = [ { code: 'en', name: 'English', nativeName: 'English', flag: '🇬🇧' }, { code: 'es', name: 'Spanish', nativeName: 'Español', flag: '🇪🇸' }, { code: 'pt', name: 'Portuguese', nativeName: 'Português', flag: '🇧🇷' }, { code: 'fr', name: 'French', nativeName: 'Français', flag: '🇫🇷' }, { code: 'de', name: 'German', nativeName: 'Deutsch', flag: '🇩🇪' }, { code: 'it', name: 'Italian', nativeName: 'Italiano', flag: '🇮🇹' }, { code: 'nl', name: 'Dutch', nativeName: 'Nederlands', flag: '🇳🇱' }, { code: 'pl', name: 'Polish', nativeName: 'Polski', flag: '🇵🇱' }, { code: 'ru', name: 'Russian', nativeName: 'Русский', flag: '🇷🇺' }, { code: 'ko', name: 'Korean', nativeName: '한국어', flag: '🇰🇵🇰🇷' }, { code: 'th', name: 'Thai', nativeName: 'ไทย', flag: '🇹🇭' }, { code: 'ja', name: 'Japanese', nativeName: '日本語', flag: '🇯🇵' }, ]; interface LanguageToggleProps { /** Show only the flag icon (compact mode) */ compact?: boolean; /** * Render the languages as an inline list instead of a dropdown. Use this * INSIDE a Radix Sheet/Dialog: a portaled DropdownMenu inherits the dialog's * `pointer-events: none` on and its items become unclickable. */ inline?: boolean; /** Additional class names */ className?: string; /** Variant style */ variant?: 'default' | 'outline' | 'ghost'; } /** * Language toggle dropdown for switching between English and Spanish */ export function LanguageToggle({ compact = false, inline = false, className, variant = 'ghost' }: LanguageToggleProps) { const { language, setLanguage } = useTranslation(); const currentLanguage = languages.find(l => l.code === language) || languages[0]; if (inline) { return (
{languages.map((lang) => ( ))}
); } return ( {languages.map((lang) => ( setLanguage(lang.code)} className={cn( 'flex items-center gap-3 cursor-pointer', language === lang.code && 'bg-primary/10 text-primary' )} > {lang.flag}
{lang.nativeName} {lang.nativeName !== lang.name && ( {lang.name} )}
{language === lang.code && ( ✓ )} ))} ); } /** * Simple language selector for settings page */ export function LanguageSelector() { const { language, setLanguage, t } = useTranslation(); return (
{languages.map((lang) => ( ))}
); }