Maximilian Liebmann
8b2452abe4
- Added `SettingsDropdown` component for selecting settings sections with icons and descriptions. - Created `SettingsPage` component to manage user settings, including account details, notifications, calendar availability, privacy, and appearance. - Introduced `SettingsSwitcher` for selecting options within settings. - Integrated command and dialog components for improved user interaction. - Updated `UserDropdown` to include links for settings and logout. - Refactored button styles and card footer layout for consistency. - Added popover functionality for dropdown menus. - Updated dependencies in `yarn.lock` for new components.
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
import { SettingsDropdown } from '@/components/settings/settings-dropdown';
|
|
|
|
import AccountTab from './tabs/account';
|
|
import NotificationsTab from './tabs/notifications';
|
|
import CalendarTab from './tabs/calendar';
|
|
import PrivacyTab from './tabs/privacy';
|
|
import AppearanceTab from './tabs/appearance';
|
|
import PasswordTab from './tabs/password';
|
|
|
|
export default function SettingsPage() {
|
|
const [currentSection, setCurrentSection] = useState('general');
|
|
|
|
const renderSettingsContent = () => {
|
|
switch (currentSection) {
|
|
case 'general':
|
|
return <AccountTab />;
|
|
|
|
case 'password':
|
|
return <PasswordTab />;
|
|
|
|
case 'notifications':
|
|
return <NotificationsTab />;
|
|
|
|
case 'calendarAvailability':
|
|
return <CalendarTab />;
|
|
|
|
case 'sharingPrivacy':
|
|
return <PrivacyTab />;
|
|
|
|
case 'appearance':
|
|
return <AppearanceTab />;
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className='fixed inset-0 flex items-center justify-center p-4 bg-background/50 backdrop-blur-sm'>
|
|
<div className='rounded-lg border bg-card text-card-foreground shadow-xl max-w-[700px] w-full max-h-[calc(100vh-2rem)] flex flex-col'>
|
|
{/* TODO: Fix overflow */}
|
|
<div className='p-6 border-b'>
|
|
<div className='flex items-center justify-between mb-4'>
|
|
<h1 className='text-2xl font-semibold'>Settings</h1>
|
|
</div>
|
|
<SettingsDropdown
|
|
currentSection={currentSection}
|
|
onSectionChange={setCurrentSection}
|
|
/>
|
|
</div>
|
|
{renderSettingsContent()}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|