11 interface SettingsPageProps {
5+ onToggleDarkMode: () => void
79 export function SettingsPage(props: SettingsPageProps) {
10- <Header user={props.user} onLogout={props.onLogout} />
11- <SettingsContent user={props.user} theme={props.theme} />
12+ <Header user={props.user} isDarkMode={props.isDarkMode} onLogout={props.onLogout} />
16+ isDarkMode={props.isDarkMode}
17+ onToggleDarkMode={props.onToggleDarkMode}
16-function SettingsContent({ user, theme }: {
23+function SettingsContent({ user, theme, isDarkMode, onToggleDarkMode }: {
27+ onToggleDarkMode: () => void
2231 <ProfileSection user={user} theme={theme} />
23- <PreferencesSection user={user} theme={theme} />
35+ isDarkMode={isDarkMode}
36+ onToggleDarkMode={onToggleDarkMode}
28-function PreferencesSection({ user, theme }: {
42+function PreferencesSection({ user, theme, isDarkMode, onToggleDarkMode }: {
46+ onToggleDarkMode: () => void
3450 <UserPreferences user={user} theme={theme} />
51+ <ThemeToggle isDarkMode={isDarkMode} onToggle={onToggleDarkMode} />
3956 function UserPreferences({ user, theme }: { user: User; theme: Theme }) {
4158 <div style={{ color: theme.text }}>
4259 <p>User: {user.name}</p>
64+function ThemeToggle({ isDarkMode, onToggle }: { isDarkMode: boolean; onToggle: () => void }) {
66+ <button onClick={onToggle}>
67+ {isDarkMode ? '☀ Light' : '🌙 Dark'}
