Add datasets page to dashboard

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>
+  )
+}

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} />

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;

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",
+  },
 ]