From ee37ee3d28fbef241f34d6d9101bcd50b1952b61 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 27 Nov 2024 09:31:08 +0800
Subject: [PATCH] Feat: Add Datasets page #3221 (#3661)

### 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 +++++++++++++++++++++++++++++++
 web/src/routes.ts                |   5 ++
 2 files changed, 143 insertions(+)
 create mode 100644 web/src/pages/datasets/index.tsx

diff --git a/web/src/pages/datasets/index.tsx b/web/src/pages/datasets/index.tsx
new file mode 100644
index 000000000..558243aea
--- /dev/null
+++ b/web/src/pages/datasets/index.tsx
@@ -0,0 +1,138 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  ChevronRight,
+  Filter,
+  MoreHorizontal,
+  Plus,
+  Search,
+} from 'lucide-react';
+
+const datasets = [
+  {
+    id: 1,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: 'https://github.com/shadcn.png',
+  },
+  {
+    id: 2,
+    title: 'HR knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: 'https://github.com/shadcn.png',
+  },
+  {
+    id: 3,
+    title: 'IT knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: 'https://github.com/shadcn.png',
+  },
+  {
+    id: 4,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: 'https://github.com/shadcn.png',
+  },
+  {
+    id: 5,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: 'https://github.com/shadcn.png',
+  },
+  {
+    id: 6,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: 'https://github.com/shadcn.png',
+  },
+  {
+    id: 7,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: 'https://github.com/shadcn.png',
+  },
+  {
+    id: 8,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: 'https://github.com/shadcn.png',
+  },
+  {
+    id: 9,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: 'https://github.com/shadcn.png',
+  },
+];
+
+export default function Datasets() {
+  return (
+    <section className="p-8 text-foreground">
+      <div className="flex justify-between mb-6">
+        <span className="text-3xl font-bold ">Datasets</span>
+        <div className="flex gap-4 items-center">
+          <Filter className="size-5" />
+          <Search className="size-5" />
+          <Button variant={'tertiary'} size={'sm'}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create dataset
+          </Button>
+        </div>
+      </div>
+      <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">
+        {datasets.map((dataset) => (
+          <Card
+            key={dataset.id}
+            className="bg-colors-background-inverse-weak flex-1"
+          >
+            <CardContent className="p-4">
+              <div className="flex justify-between mb-4">
+                <div
+                  className="w-[70px] h-[70px] rounded-xl bg-cover"
+                  style={{ backgroundImage: `url(${dataset.image})` }}
+                />
+                <Button variant="ghost" size="icon">
+                  <MoreHorizontal className="h-6 w-6" />
+                </Button>
+              </div>
+              <div className="flex justify-between items-end">
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">
+                    {dataset.title}
+                  </h3>
+                  <p className="text-sm opacity-80">
+                    {dataset.files} | {dataset.size}
+                  </p>
+                  <p className="text-sm opacity-80">
+                    Created {dataset.created}
+                  </p>
+                </div>
+                <Button variant="secondary" size="icon">
+                  <ChevronRight className="h-6 w-6" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/web/src/routes.ts b/web/src/routes.ts
index ed8243e0f..b7d68168b 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -131,6 +131,11 @@ const routes = [
     layout: false,
     component: '@/pages/home',
   },
+  {
+    path: '/datasets',
+    layout: false,
+    component: '@/pages/datasets',
+  },
   {
     path: '/profile-setting',
     layout: false,