feat: Implement settings dropdown and page components

- 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.

src/components/settings/settings-page.tsx

@@ -0,0 +1,59 @@
+'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>
+  );
+}