56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import { Card } from '@/components/ui/Card';
|
||
|
|
import { Select } from '@/components/ui/Select';
|
||
|
|
import { useUIStore } from '@/store/uiStore';
|
||
|
|
|
||
|
|
export function SettingsPage() {
|
||
|
|
const { t, i18n } = useTranslation();
|
||
|
|
const { theme, setTheme, locale, setLocale } = useUIStore();
|
||
|
|
|
||
|
|
const handleLocaleChange = (newLocale: string) => {
|
||
|
|
setLocale(newLocale as 'de' | 'en');
|
||
|
|
i18n.changeLanguage(newLocale);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleThemeChange = (newTheme: string) => {
|
||
|
|
setTheme(newTheme as 'light' | 'dark' | 'system');
|
||
|
|
if (newTheme === 'dark') {
|
||
|
|
document.documentElement.classList.add('dark');
|
||
|
|
} else {
|
||
|
|
document.documentElement.classList.remove('dark');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-6 max-w-4xl mx-auto" data-testid="settings-page">
|
||
|
|
<h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('settings.title')}</h1>
|
||
|
|
<div className="space-y-6">
|
||
|
|
<Card title={t('settings.language')} description="Wählen Sie Ihre bevorzugte Sprache">
|
||
|
|
<Select
|
||
|
|
options={[
|
||
|
|
{ value: 'de', label: 'Deutsch' },
|
||
|
|
{ value: 'en', label: 'English' },
|
||
|
|
]}
|
||
|
|
value={locale}
|
||
|
|
onChange={(e) => handleLocaleChange(e.target.value)}
|
||
|
|
aria-label={t('settings.language')}
|
||
|
|
/>
|
||
|
|
</Card>
|
||
|
|
<Card title={t('settings.theme')} description="Wählen Sie Ihr bevorzugtes Design">
|
||
|
|
<Select
|
||
|
|
options={[
|
||
|
|
{ value: 'light', label: t('settings.light') },
|
||
|
|
{ value: 'dark', label: t('settings.dark') },
|
||
|
|
{ value: 'system', label: t('settings.system') },
|
||
|
|
]}
|
||
|
|
value={theme}
|
||
|
|
onChange={(e) => handleThemeChange(e.target.value)}
|
||
|
|
aria-label={t('settings.theme')}
|
||
|
|
/>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|