35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { FaGlobe } from 'react-icons/fa';
|
|
import { useLanguage } from '../../../providers/language/LanguageContext';
|
|
import styles from './LanguageSelector.module.css';
|
|
|
|
export function LanguageSelector() {
|
|
const { currentLanguage, setLanguage, availableLanguages } = useLanguage();
|
|
|
|
// Always show the selector. If the backend has not (yet) returned a list,
|
|
// fall back to a static option for the currently active language so the
|
|
// control is visible even on pre-login screens / before the codes endpoint
|
|
// resolves.
|
|
const optionList = availableLanguages.length > 0
|
|
? availableLanguages
|
|
: [{ code: currentLanguage, label: currentLanguage.toUpperCase() } as { code: string; label: string }];
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<FaGlobe className={styles.icon} />
|
|
<select
|
|
className={styles.select}
|
|
value={currentLanguage}
|
|
onChange={(e) => setLanguage(e.target.value as typeof currentLanguage)}
|
|
aria-label="Sprache / Language"
|
|
>
|
|
{optionList.map((lang) => (
|
|
<option key={lang.code} value={lang.code}>
|
|
{lang.label || lang.code.toUpperCase()}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LanguageSelector;
|