93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { Label } from '@/components/ui/label';
|
||
|
|
import { Switch } from '@/components/ui/switch';
|
||
|
|
import { ProfileSettingRouteKey } from '@/constants/setting';
|
||
|
|
import { useSecondPathName } from '@/hooks/route-hook';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
import {
|
||
|
|
AlignEndVertical,
|
||
|
|
Banknote,
|
||
|
|
Box,
|
||
|
|
FileCog,
|
||
|
|
LayoutGrid,
|
||
|
|
LogOut,
|
||
|
|
User,
|
||
|
|
} from 'lucide-react';
|
||
|
|
import { useHandleMenuClick } from './hooks';
|
||
|
|
|
||
|
|
const menuItems = [
|
||
|
|
{
|
||
|
|
section: 'Account & collaboration',
|
||
|
|
items: [
|
||
|
|
{ icon: User, label: 'Profile', key: ProfileSettingRouteKey.Profile },
|
||
|
|
{ icon: LayoutGrid, label: 'Team', key: ProfileSettingRouteKey.Team },
|
||
|
|
{ icon: Banknote, label: 'Plan', key: ProfileSettingRouteKey.Plan },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: 'System configurations',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
icon: Box,
|
||
|
|
label: 'Model management',
|
||
|
|
key: ProfileSettingRouteKey.Model,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: FileCog,
|
||
|
|
label: 'Prompt management',
|
||
|
|
key: ProfileSettingRouteKey.Prompt,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: AlignEndVertical,
|
||
|
|
label: 'Chunking method',
|
||
|
|
key: ProfileSettingRouteKey.Chunk,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
export function SideBar() {
|
||
|
|
const pathName = useSecondPathName();
|
||
|
|
const { handleMenuClick } = useHandleMenuClick();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<aside className="w-[303px] bg-background border-r">
|
||
|
|
{menuItems.map((section, idx) => (
|
||
|
|
<div key={idx}>
|
||
|
|
<h2 className="p-6 text-sm font-semibold">{section.section}</h2>
|
||
|
|
{section.items.map((item, itemIdx) => {
|
||
|
|
const active = pathName === item.key;
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
key={itemIdx}
|
||
|
|
variant={active ? 'secondary' : 'ghost'}
|
||
|
|
className={cn('w-full justify-start gap-2.5 p-6 relative')}
|
||
|
|
onClick={handleMenuClick(item.key)}
|
||
|
|
>
|
||
|
|
<item.icon className="w-6 h-6" />
|
||
|
|
<span>{item.label}</span>
|
||
|
|
{active && (
|
||
|
|
<div className="absolute right-0 w-[5px] h-[66px] bg-primary rounded-l-xl shadow-[0_0_5.94px_#7561ff,0_0_11.88px_#7561ff,0_0_41.58px_#7561ff,0_0_83.16px_#7561ff,0_0_142.56px_#7561ff,0_0_249.48px_#7561ff]" />
|
||
|
|
)}
|
||
|
|
</Button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
|
||
|
|
<div className="p-6 mt-auto border-t">
|
||
|
|
<div className="flex items-center gap-2 mb-6">
|
||
|
|
<Switch id="dark-mode" />
|
||
|
|
<Label htmlFor="dark-mode" className="text-sm">
|
||
|
|
Dark
|
||
|
|
</Label>
|
||
|
|
</div>
|
||
|
|
<Button variant="outline" className="w-full gap-3">
|
||
|
|
<LogOut className="w-6 h-6" />
|
||
|
|
Logout
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|