balibabu
commited on
Commit
·
cfd627d
1
Parent(s):
c62f284
Feat: Add Datasets page #3221 (#3661)
Browse files### What problem does this PR solve?
Feat: Add Datasets page #3221
### Type of change
- [x] New Feature (non-breaking change which adds functionality)
- web/src/pages/datasets/index.tsx +138 -0
- web/src/routes.ts +5 -0
web/src/pages/datasets/index.tsx
ADDED
@@ -0,0 +1,138 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { Button } from '@/components/ui/button';
|
2 |
+
import { Card, CardContent } from '@/components/ui/card';
|
3 |
+
import {
|
4 |
+
ChevronRight,
|
5 |
+
Filter,
|
6 |
+
MoreHorizontal,
|
7 |
+
Plus,
|
8 |
+
Search,
|
9 |
+
} from 'lucide-react';
|
10 |
+
|
11 |
+
const datasets = [
|
12 |
+
{
|
13 |
+
id: 1,
|
14 |
+
title: 'Legal knowledge base',
|
15 |
+
files: '1,242 files',
|
16 |
+
size: '152 MB',
|
17 |
+
created: '12.02.2024',
|
18 |
+
image: 'https://github.com/shadcn.png',
|
19 |
+
},
|
20 |
+
{
|
21 |
+
id: 2,
|
22 |
+
title: 'HR knowledge base',
|
23 |
+
files: '1,242 files',
|
24 |
+
size: '152 MB',
|
25 |
+
created: '12.02.2024',
|
26 |
+
image: 'https://github.com/shadcn.png',
|
27 |
+
},
|
28 |
+
{
|
29 |
+
id: 3,
|
30 |
+
title: 'IT knowledge base',
|
31 |
+
files: '1,242 files',
|
32 |
+
size: '152 MB',
|
33 |
+
created: '12.02.2024',
|
34 |
+
image: 'https://github.com/shadcn.png',
|
35 |
+
},
|
36 |
+
{
|
37 |
+
id: 4,
|
38 |
+
title: 'Legal knowledge base',
|
39 |
+
files: '1,242 files',
|
40 |
+
size: '152 MB',
|
41 |
+
created: '12.02.2024',
|
42 |
+
image: 'https://github.com/shadcn.png',
|
43 |
+
},
|
44 |
+
{
|
45 |
+
id: 5,
|
46 |
+
title: 'Legal knowledge base',
|
47 |
+
files: '1,242 files',
|
48 |
+
size: '152 MB',
|
49 |
+
created: '12.02.2024',
|
50 |
+
image: 'https://github.com/shadcn.png',
|
51 |
+
},
|
52 |
+
{
|
53 |
+
id: 6,
|
54 |
+
title: 'Legal knowledge base',
|
55 |
+
files: '1,242 files',
|
56 |
+
size: '152 MB',
|
57 |
+
created: '12.02.2024',
|
58 |
+
image: 'https://github.com/shadcn.png',
|
59 |
+
},
|
60 |
+
{
|
61 |
+
id: 7,
|
62 |
+
title: 'Legal knowledge base',
|
63 |
+
files: '1,242 files',
|
64 |
+
size: '152 MB',
|
65 |
+
created: '12.02.2024',
|
66 |
+
image: 'https://github.com/shadcn.png',
|
67 |
+
},
|
68 |
+
{
|
69 |
+
id: 8,
|
70 |
+
title: 'Legal knowledge base',
|
71 |
+
files: '1,242 files',
|
72 |
+
size: '152 MB',
|
73 |
+
created: '12.02.2024',
|
74 |
+
image: 'https://github.com/shadcn.png',
|
75 |
+
},
|
76 |
+
{
|
77 |
+
id: 9,
|
78 |
+
title: 'Legal knowledge base',
|
79 |
+
files: '1,242 files',
|
80 |
+
size: '152 MB',
|
81 |
+
created: '12.02.2024',
|
82 |
+
image: 'https://github.com/shadcn.png',
|
83 |
+
},
|
84 |
+
];
|
85 |
+
|
86 |
+
export default function Datasets() {
|
87 |
+
return (
|
88 |
+
<section className="p-8 text-foreground">
|
89 |
+
<div className="flex justify-between mb-6">
|
90 |
+
<span className="text-3xl font-bold ">Datasets</span>
|
91 |
+
<div className="flex gap-4 items-center">
|
92 |
+
<Filter className="size-5" />
|
93 |
+
<Search className="size-5" />
|
94 |
+
<Button variant={'tertiary'} size={'sm'}>
|
95 |
+
<Plus className="mr-2 h-4 w-4" />
|
96 |
+
Create dataset
|
97 |
+
</Button>
|
98 |
+
</div>
|
99 |
+
</div>
|
100 |
+
<div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8">
|
101 |
+
{datasets.map((dataset) => (
|
102 |
+
<Card
|
103 |
+
key={dataset.id}
|
104 |
+
className="bg-colors-background-inverse-weak flex-1"
|
105 |
+
>
|
106 |
+
<CardContent className="p-4">
|
107 |
+
<div className="flex justify-between mb-4">
|
108 |
+
<div
|
109 |
+
className="w-[70px] h-[70px] rounded-xl bg-cover"
|
110 |
+
style={{ backgroundImage: `url(${dataset.image})` }}
|
111 |
+
/>
|
112 |
+
<Button variant="ghost" size="icon">
|
113 |
+
<MoreHorizontal className="h-6 w-6" />
|
114 |
+
</Button>
|
115 |
+
</div>
|
116 |
+
<div className="flex justify-between items-end">
|
117 |
+
<div>
|
118 |
+
<h3 className="text-lg font-semibold mb-2">
|
119 |
+
{dataset.title}
|
120 |
+
</h3>
|
121 |
+
<p className="text-sm opacity-80">
|
122 |
+
{dataset.files} | {dataset.size}
|
123 |
+
</p>
|
124 |
+
<p className="text-sm opacity-80">
|
125 |
+
Created {dataset.created}
|
126 |
+
</p>
|
127 |
+
</div>
|
128 |
+
<Button variant="secondary" size="icon">
|
129 |
+
<ChevronRight className="h-6 w-6" />
|
130 |
+
</Button>
|
131 |
+
</div>
|
132 |
+
</CardContent>
|
133 |
+
</Card>
|
134 |
+
))}
|
135 |
+
</div>
|
136 |
+
</section>
|
137 |
+
);
|
138 |
+
}
|
web/src/routes.ts
CHANGED
@@ -131,6 +131,11 @@ const routes = [
|
|
131 |
layout: false,
|
132 |
component: '@/pages/home',
|
133 |
},
|
|
|
|
|
|
|
|
|
|
|
134 |
{
|
135 |
path: '/profile-setting',
|
136 |
layout: false,
|
|
|
131 |
layout: false,
|
132 |
component: '@/pages/home',
|
133 |
},
|
134 |
+
{
|
135 |
+
path: '/datasets',
|
136 |
+
layout: false,
|
137 |
+
component: '@/pages/datasets',
|
138 |
+
},
|
139 |
{
|
140 |
path: '/profile-setting',
|
141 |
layout: false,
|