React components
Language selector
A dropdown component for selecting languages.
Overview
The LanguageSelector provides a popover menu to switch between different languages. It uses the Command component for search and selection capability.
Usage
import { LanguageSelector } from '@/components/core/language-selector';
const languages: LanguageData[] = [
{
value: 'en',
label: 'English',
},
{
value: 'es',
label: 'Espanol',
},
{
value: 'fr',
label: 'France',
},
]
function Footer() {
return (
<footer>
<LanguageSelector languages={languages} />
</footer>
);
}Props
This component accepts all props for the Button component, as the trigger is a button.
| Prop | Type | Default | Description |
|---|---|---|---|
languages | LanguageData[] | Required | Languages data contains label and value |
className? | string | - | Optional CSS class names for the trigger button. |
Languages Interface
The languages prop expects an array of objects matching the LanguageData interface:
interface LanguageData {
value: string; // en, ru, etc.
label: string; // English, Русский, etc.
}