101 lines
2.6 KiB
TypeScript
101 lines
2.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import classes from '@/features/settings/modal/modal.module.css';
|
|
import { IconBell, IconFingerprint, IconReceipt, IconSettingsCog, IconUser, IconUsers } from '@tabler/icons-react';
|
|
import { Loader, ScrollArea, Text } from '@mantine/core';
|
|
|
|
const AccountSettings = React.lazy(() => import('@/features/settings/account/settings/account-settings'));
|
|
const WorkspaceSettings = React.lazy(() => import('@/features/settings/workspace/settings/workspace-settings'));
|
|
const WorkspaceMembers = React.lazy(() => import('@/features/settings/workspace/members/workspace-members'));
|
|
|
|
interface DataItem {
|
|
label: string;
|
|
icon: React.ElementType;
|
|
}
|
|
|
|
interface DataGroup {
|
|
heading: string;
|
|
items: DataItem[];
|
|
}
|
|
|
|
const groupedData: DataGroup[] = [
|
|
{
|
|
heading: 'Account',
|
|
items: [
|
|
{ label: 'Account', icon: IconUser },
|
|
{ label: 'Notifications', icon: IconBell },
|
|
],
|
|
},
|
|
{
|
|
heading: 'Workspace',
|
|
items: [
|
|
{ label: 'General', icon: IconSettingsCog },
|
|
{ label: 'Members', icon: IconUsers },
|
|
{ label: 'Security', icon: IconFingerprint },
|
|
{ label: 'Billing', icon: IconReceipt },
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function SettingsSidebar() {
|
|
const [active, setActive] = useState('Account');
|
|
|
|
const menu = groupedData.map((group) => (
|
|
<div key={group.heading}>
|
|
<Text c="dimmed" className={classes.sidebarItemHeader}>{group.heading}</Text>
|
|
{group.items.map((item) => (
|
|
<div
|
|
className={classes.sidebarItem}
|
|
data-active={item.label === active || undefined}
|
|
key={item.label}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
setActive(item.label);
|
|
}}
|
|
>
|
|
<item.icon className={classes.sidebarItemIcon} stroke={1.5} />
|
|
<span>{item.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
));
|
|
|
|
let ActiveComponent;
|
|
|
|
switch (active) {
|
|
case 'Account':
|
|
ActiveComponent = AccountSettings;
|
|
break;
|
|
case 'General':
|
|
ActiveComponent = WorkspaceSettings;
|
|
break;
|
|
case 'Members':
|
|
ActiveComponent = WorkspaceMembers;
|
|
break;
|
|
default:
|
|
ActiveComponent = null;
|
|
}
|
|
|
|
return (
|
|
<div className={classes.sidebarFlex}>
|
|
<nav className={classes.sidebar}>
|
|
<div className={classes.sidebarMain}>
|
|
{menu}
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<ScrollArea h="650" w="100%" scrollbarSize={4}>
|
|
|
|
<div className={classes.sidebarRightSection}>
|
|
|
|
<React.Suspense fallback={<Loader size="sm" color="gray" />}>
|
|
{ActiveComponent && <ActiveComponent />}
|
|
</React.Suspense>
|
|
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
|
|
</div>
|
|
);
|
|
}
|