59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import { Settings, Palette, Languages } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import type { Theme } from '../../types';
|
|
import { Card } from '../ui';
|
|
import { ThemeSelector } from './ThemeSelector';
|
|
import { LanguageSelector } from './LanguageSelector';
|
|
|
|
interface SettingsSectionProps {
|
|
currentTheme: Theme;
|
|
currentLanguage: string;
|
|
onThemeChange: (theme: Theme) => void;
|
|
onLanguageChange: (lang: string) => void;
|
|
}
|
|
|
|
export function SettingsSection({
|
|
currentTheme,
|
|
currentLanguage,
|
|
onThemeChange,
|
|
onLanguageChange,
|
|
}: SettingsSectionProps) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Card>
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-2 bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-xl">
|
|
<Settings className="w-6 h-6" />
|
|
</div>
|
|
<h2 className="text-xl font-bold text-gray-800 dark:text-white">{t('profile.settings')}</h2>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Palette className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
|
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
{t('profile.theme')}
|
|
</h3>
|
|
</div>
|
|
<ThemeSelector currentTheme={currentTheme} onThemeChange={onThemeChange} />
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Languages className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
|
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
{t('profile.language')}
|
|
</h3>
|
|
</div>
|
|
<LanguageSelector
|
|
currentLanguage={currentLanguage}
|
|
onLanguageChange={onLanguageChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|