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 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,