diff --git a/src/components/LanguageToggle.tsx b/src/components/LanguageToggle.tsx index add2b1d..34f554b 100644 --- a/src/components/LanguageToggle.tsx +++ b/src/components/LanguageToggle.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Languages } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { @@ -61,14 +62,33 @@ interface LanguageToggleProps { * 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 { language, setLanguage, t } = useTranslation(); + const [query, setQuery] = useState(''); + + const safeQuery = query.trim().toLowerCase(); + const filteredLanguages = safeQuery + ? languages.filter( + (l) => + l.name.toLowerCase().includes(safeQuery) || + l.nativeName.toLowerCase().includes(safeQuery) || + l.code.toLowerCase().includes(safeQuery) + ) + : languages; const currentLanguage = languages.find(l => l.code === language) || languages[0]; if (inline) { return (
- {languages.map((lang) => ( +
+ setQuery(e.target.value)} + placeholder={t('nav.searchLanguages')} + className="h-9 w-full rounded-lg border border-border bg-background px-3 text-sm outline-none focus:border-primary" + /> +
+ {filteredLanguages.map((lang) => ( ))} + {filteredLanguages.length === 0 && ( +
+ {t('nav.noLanguages')} +
+ )}
); } @@ -116,7 +141,20 @@ export function LanguageToggle({ compact = false, inline = false, className, var - {languages.map((lang) => ( +
e.stopPropagation()} + onPointerDown={(e) => e.stopPropagation()} + > + setQuery(e.target.value)} + placeholder={t('nav.searchLanguages')} + className="h-8 w-full rounded-sm bg-transparent px-2 text-sm outline-none placeholder:text-muted-foreground" + /> +
+ {filteredLanguages.map((lang) => ( setLanguage(lang.code)} @@ -137,6 +175,11 @@ export function LanguageToggle({ compact = false, inline = false, className, var )} ))} + {filteredLanguages.length === 0 && ( +
+ {t('nav.noLanguages')} +
+ )}
); diff --git a/src/i18n/en.ts b/src/i18n/en.ts index 3a90b16..376d182 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -57,6 +57,8 @@ const en = { // Navigation nav: { + searchLanguages: 'Search languages...', + noLanguages: 'No languages found', home: 'Home', // Kept to one word so the mobile tab bar labels stay on a single line. map: 'Spots', diff --git a/src/i18n/es.ts b/src/i18n/es.ts index 47844aa..e018747 100644 --- a/src/i18n/es.ts +++ b/src/i18n/es.ts @@ -58,6 +58,8 @@ const es = { // Navigation nav: { + searchLanguages: 'Buscar idiomas...', + noLanguages: 'No se encontraron idiomas', home: 'Inicio', map: 'Spots', lab: 'El Lab',