From 995902eb5210e91d938ae5783c90b487e59bb235 Mon Sep 17 00:00:00 2001
From: Aiden <30964272+0xaaiden@users.noreply.github.com>
Date: Sun, 3 Nov 2024 14:01:05 -0500
Subject: [PATCH] Add datasets page to dashboard

Add a new page to offer curated datasets with cards of different datasets available.

* **New Page**: Add `app/(dashboard)/dashboard/datasets/page.tsx` to display curated datasets using `BentoGrid` and `BentoGridItem` components.
* **Sidebar Navigation**: Update `app/(dashboard)/dashboard/layout.tsx` to include a link to the new datasets page in the sidebar navigation under the "Resources" section.
* **Dataset Card Component**: Create `components/app/dashboard-dataset-card.tsx` to display individual dataset cards with title, description, and image.
* **Dashboard Menu Configuration**: Update `config/menu-dashboard.ts` to include the new datasets page in the dashboard menu configuration.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/function03-labs/WalletLabels?shareId=XXXX-XXXX-XXXX-XXXX).
---
 app/(dashboard)/dashboard/datasets/page.tsx | 20 ++++++++++++++++++++
 app/(dashboard)/dashboard/layout.tsx        |  3 +++
 components/app/dashboard-dataset-card.tsx   | 21 +++++++++++++++++++++
 config/menu-dashboard.ts                    |  7 ++++---
 4 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 app/(dashboard)/dashboard/datasets/page.tsx
 create mode 100644 components/app/dashboard-dataset-card.tsx

diff --git a/app/(dashboard)/dashboard/datasets/page.tsx b/app/(dashboard)/dashboard/datasets/page.tsx
new file mode 100644
index 00000000..af01ef60
--- /dev/null
+++ b/app/(dashboard)/dashboard/datasets/page.tsx
@@ -0,0 +1,20 @@
+import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid"
+import { datasets } from "@/data/datasets"
+
+export default function DatasetsPage() {
+  return (
+    <section className="w-full py-4 sm:p-10">
+      <h1 className="text-3xl font-bold mb-6">Curated Datasets</h1>
+      <BentoGrid>
+        {datasets.map((dataset) => (
+          <BentoGridItem
+            key={dataset.id}
+            title={dataset.title}
+            description={dataset.description}
+            header={<img src={dataset.image} alt={dataset.title} />}
+          />
+        ))}
+      </BentoGrid>
+    </section>
+  )
+}
diff --git a/app/(dashboard)/dashboard/layout.tsx b/app/(dashboard)/dashboard/layout.tsx
index e77614dd..4933bd4c 100644
--- a/app/(dashboard)/dashboard/layout.tsx
+++ b/app/(dashboard)/dashboard/layout.tsx
@@ -46,6 +46,9 @@ export default async function DashboardLayout({
               Resources
             </h3>
             <SidebarNav items={menuResources} />
+            <Link href="/dashboard/datasets" className="block py-2 text-sm text-muted-foreground hover:text-foreground">
+              Datasets
+            </Link>
           </ScrollArea>
           <footer className="fixed bottom-6 flex flex-col border-t pr-2 pt-4">
             <LoggedUser user={user} />
diff --git a/components/app/dashboard-dataset-card.tsx b/components/app/dashboard-dataset-card.tsx
new file mode 100644
index 00000000..1311fdb1
--- /dev/null
+++ b/components/app/dashboard-dataset-card.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface DashboardDatasetCardProps {
+  title: string;
+  description: string;
+  image: string;
+}
+
+const DashboardDatasetCard: React.FC<DashboardDatasetCardProps> = ({ title, description, image }) => {
+  return (
+    <div className="dataset-card">
+      <img src={image} alt={title} className="dataset-card-image" />
+      <div className="dataset-card-content">
+        <h2 className="dataset-card-title">{title}</h2>
+        <p className="dataset-card-description">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardDatasetCard;
diff --git a/config/menu-dashboard.ts b/config/menu-dashboard.ts
index a34f3312..2baf64e9 100644
--- a/config/menu-dashboard.ts
+++ b/config/menu-dashboard.ts
@@ -1,6 +1,3 @@
-// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-// Menu Dashboard
-// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 export const menuDashboard = [
   {
     label: "API Key Management",
@@ -14,4 +11,8 @@ export const menuDashboard = [
     label: "Submit",
     href: "/dashboard/submit",
   },
+  {
+    label: "Datasets",
+    href: "/dashboard/datasets",
+  },
 ]