{t('lang.title')} · {LANGUAGES.length}
setQuery(e.target.value)}
placeholder={t('lang.search')}
autoFocus
style={{
width: '100%', padding: '10px 12px',
background: p.bg, color: p.ink,
border: `1px solid ${p.ink}1a`,
borderRadius: 6, fontSize: 13,
fontFamily: 'inherit', outline: 'none',
marginBottom: 10
}}
/>
{filtered.map((l) => {
const active = l.code === code;
return (
);
})}
{filtered.length === 0 && (
No match.
)}
}.png`})
);
}
// Switcher — pill button + popup grid with search.
function LanguageSwitcher({ p, inline = false }) {
const { code, lang, t, setLang } = useI18n();
const [open, setOpen] = React.useState(false);
const [query, setQuery] = React.useState('');
const ref = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
document.addEventListener('mousedown', onClick);
document.addEventListener('keydown', onKey);
return () => {
document.removeEventListener('mousedown', onClick);
document.removeEventListener('keydown', onKey);
};
}, [open]);
const filtered = LANGUAGES.filter((l) => {
const q = query.trim().toLowerCase();
if (!q) return true;
return l.name.toLowerCase().includes(q) || l.native.toLowerCase().includes(q) || l.code.includes(q);
});
return (