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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 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 11x 11x 11x 11x 11x 11x 11x 11x 11x 1x 1x 11x 11x 11x 1x 1x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x | /**
* @file LanguageRegionMenuSection.tsx
* @module app/HamburgerMenu/LanguageRegionMenuSection
*
* @summary
* Language & Region settings section coordinator that composes language, date format, and number format settings.
* Acts as a thin container orchestrating sub-components from LanguageRegionSettings subdirectory.
*
* @enterprise
* - Delegates individual settings to focused sub-components
* - Integrates with useSettings hook for persistence
* - Maintains clean separation of concerns
*/
import { Box, Typography, Stack } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { useSettings } from '../../hooks/useSettings';
import type { SupportedLocale } from '../../theme';
import {
LanguageToggle,
DateFormatSetting,
NumberFormatSetting,
} from './LanguageRegionSettings';
interface LanguageRegionMenuSectionProps {
/** Current locale (de or en) */
locale: SupportedLocale;
/** Callback fired when locale is changed */
onLocaleChange: (locale: SupportedLocale) => void;
}
/**
* Language & Region menu section component.
*
* Coordinates three distinct setting controls:
* 1. Language toggle (Deutsch/English with flags)
* 2. Date format radio group (DD.MM.YYYY vs YYYY-MM-DD)
* 3. Number format radio group (German vs US style)
*
* @param props - Component props
* @returns JSX element rendering the language and region settings section
*/
export default function LanguageRegionMenuSection({
locale,
onLocaleChange,
}: LanguageRegionMenuSectionProps) {
const { t } = useTranslation(['common']);
const { userPreferences, setUserPreferences } = useSettings();
// Handler for date format changes - persists to user preferences
const handleDateFormatChange = (newFormat: 'DD.MM.YYYY' | 'YYYY-MM-DD') => {
setUserPreferences({ dateFormat: newFormat });
};
// Handler for number format changes - persists to user preferences
const handleNumberFormatChange = (newFormat: 'DE' | 'EN_US') => {
setUserPreferences({ numberFormat: newFormat });
};
return (
<Box sx={{ px: 2, py: 1.5 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1.5 }}>
{t('language.title', 'Sprache & Region / Language & Region')}
</Typography>
<Stack spacing={1.5}>
{/* Language Selection Component */}
<LanguageToggle locale={locale} onLocaleChange={onLocaleChange} />
{/* Date Format Selection Component */}
<DateFormatSetting
dateFormat={userPreferences.dateFormat}
onChange={handleDateFormatChange}
/>
{/* Number Format Selection Component */}
<NumberFormatSetting
numberFormat={userPreferences.numberFormat}
onChange={handleNumberFormatChange}
/>
</Stack>
</Box>
);
}
|