File size: 2,400 Bytes
ccb514f f011ffe af41fbc ccb514f f011ffe ccb514f f011ffe ccb514f f011ffe ccb514f f011ffe ccb514f f011ffe ccb514f af41fbc ccb514f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import { Button } from '@/components/ui/button';
import { useSecondPathName } from '@/hooks/route-hook';
import { cn } from '@/lib/utils';
import { Routes } from '@/routes';
import { Banknote, LayoutGrid, Trash2, User } from 'lucide-react';
import { useHandleMenuClick } from './hooks';
const items = [
{ icon: User, label: 'Dataset', key: Routes.DatasetBase },
{
icon: LayoutGrid,
label: 'Retrieval testing',
key: Routes.DatasetTesting,
},
{ icon: Banknote, label: 'Settings', key: Routes.DatasetSetting },
];
const dataset = {
id: 1,
title: 'Legal knowledge base',
files: '1,242 files',
size: '152 MB',
created: '12.02.2024',
image: 'https://github.com/shadcn.png',
};
export function SideBar() {
const pathName = useSecondPathName();
const { handleMenuClick } = useHandleMenuClick();
return (
<aside className="w-[303px] relative border-r ">
<div className="p-6 space-y-2 border-b">
<div
className="w-[70px] h-[70px] rounded-xl bg-cover"
style={{ backgroundImage: `url(${dataset.image})` }}
/>
<h3 className="text-lg font-semibold mb-2">{dataset.title}</h3>
<div className="text-sm opacity-80">
{dataset.files} | {dataset.size}
</div>
<div className="text-sm opacity-80">Created {dataset.created}</div>
</div>
<div className="mt-4">
{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>
<Button
variant="outline"
className="absolute bottom-6 left-6 right-6 text-colors-text-functional-danger border-colors-text-functional-danger"
>
<Trash2 />
Delete dataset
</Button>
</aside>
);
}
|