Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 1x 1x 1x | /**
* @file LanguageToggle.tsx
* @description
* Language toggle button (DE/EN) for the public shell header.
* Displays flag icon for current language and triggers language change.
*
* @enterprise
* - Flag icons for visual language indication
* - Clean MUI IconButton with accessibility
* - Responsive icon sizing
* - Integrates with i18next and toast notifications
*
* @example
* ```tsx
* <LanguageToggle
* locale="de"
* onToggle={() => toggleLanguage()}
* tooltip={t('actions.toggleLanguage')}
* />
* ```
*/
import * as React from 'react';
import { IconButton, Tooltip } from '@mui/material';
import type { SupportedLocale } from '../../../theme';
const DE_FLAG = '/flags/de.svg';
const US_FLAG = '/flags/us.svg';
interface LanguageToggleProps {
/** Current locale: 'de' or 'en' */
locale: SupportedLocale;
/** Callback when toggle is clicked */
onToggle: () => void;
/** Tooltip text for accessibility */
tooltip: string;
}
/**
* LanguageToggle component
* @param locale - Current locale ('de' | 'en')
* @param onToggle - Callback function to toggle language
* @param tooltip - Accessibility tooltip text
* @returns Language toggle button with flag icon
*/
const LanguageToggle: React.FC<LanguageToggleProps> = ({ locale, onToggle, tooltip }) => (
<Tooltip title={tooltip}>
<IconButton onClick={onToggle}>
<img
src={locale === 'de' ? DE_FLAG : US_FLAG}
alt={locale === 'de' ? 'Deutsch' : 'English'}
width={20}
height={20}
/>
</IconButton>
</Tooltip>
);
export default LanguageToggle;
|