57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { User, Lock, Globe, Bot, LayoutGrid, Volume2 } from 'lucide-react';
|
|
import type { LayoutNode, PanelComponents } from 'officerdev';
|
|
import { WorkspaceLayout } from 'officerdev';
|
|
|
|
import { createSettingsPanelComponents, type SettingsSection } from '../SettingsPanel';
|
|
import { UserData } from './UserData';
|
|
import { ChangePassword } from './ChangePassword';
|
|
import { Languages } from './Languages';
|
|
import { AIModels } from './AIModels';
|
|
import { DockSettings } from './DockSettings';
|
|
import { VoicePreference } from './VoicePreference';
|
|
|
|
const GLOBAL_KEY = 'PROFILE_SETTINGS_SELECTED';
|
|
|
|
const sections: SettingsSection[] = [
|
|
{ key: 'profile', icon: User, title: 'Profile', description: 'Avatar, name, and email', content: <UserData /> },
|
|
{ key: 'change-password', icon: Lock, title: 'Change Password', description: 'Update your password', content: <ChangePassword /> },
|
|
{ key: 'ai-models', icon: Bot, title: 'AI Models', description: 'Default models for chat, projects, and tasks', content: <AIModels /> },
|
|
{ key: 'languages', icon: Globe, title: 'Languages', description: 'Spoken, default, and translation', content: <Languages /> },
|
|
{ key: 'voice', icon: Volume2, title: 'Voice', description: 'Text-to-speech voice preference', content: <VoicePreference /> },
|
|
{ key: 'dock', icon: LayoutGrid, title: 'Dock', description: 'Choose and reorder dock items', content: <DockSettings /> },
|
|
];
|
|
|
|
const { Sidebar, Content } = createSettingsPanelComponents({
|
|
globalKey: GLOBAL_KEY,
|
|
sidebarIcon: User,
|
|
sidebarLabel: 'Profile',
|
|
sections,
|
|
});
|
|
|
|
const layout: LayoutNode = {
|
|
type: 'group',
|
|
id: 'profile-root',
|
|
direction: 'horizontal',
|
|
children: [
|
|
{ node: { type: 'panel', id: 'profile-left', appType: null }, size: 20 },
|
|
{ node: { type: 'panel', id: 'profile-right', appType: null }, size: 80 },
|
|
],
|
|
};
|
|
|
|
export const ProfileSettings = () => {
|
|
const panelComponents: PanelComponents = useMemo(
|
|
() => ({
|
|
'profile-left': Sidebar,
|
|
'profile-right': Content,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<div className="h-full w-full pt-2">
|
|
<WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
|
|
</div>
|
|
);
|
|
};
|