From 07ecd3ab41c2efbb310baba71276ac649863e956 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 2 Mar 2026 23:13:00 +0000
Subject: [PATCH] Add src/app/dashboard/page.tsx

---
 src/app/dashboard/page.tsx | 168 +++++++++++++++++++++++++++++++++++++
 1 file changed, 168 insertions(+)
 create mode 100644 src/app/dashboard/page.tsx

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..d346134
--- /dev/null
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import { useState } from "react";
+import { Upload, Music, BookOpen, Download, Play, Plus } from "lucide-react";
+
+export default function DashboardPage() {
+  const [uploadedFiles, setUploadedFiles] = useState<Array<{id: string; name: string; status: 'processing' | 'ready'; audioUrl?: string}>>([
+    { id: "1", name: "Calculus I - Chapter 3.pdf", status: "ready", audioUrl: "/audio/calculus-3.mp3" },
+    { id: "2", name: "Biology Notes - Photosynthesis.docx", status: "processing" },
+  ]);
+
+  const [materials, setMaterials] = useState<Array<{id: string; title: string; creator: string; subject: string; downloads: number}>>([
+    { id: "m1", title: "Physics Fundamentals", creator: "Prof. James Chen", subject: "Physics", downloads: 1250 },
+    { id: "m2", title: "History of Africa", creator: "Dr. Amara Okonkwo", subject: "History", downloads: 892 },
+    { id: "m3", title: "Advanced Chemistry", creator: "Prof. Sarah Kipchoge", subject: "Chemistry", downloads: 654 },
+    { id: "m4", title: "Literature Analysis", creator: "Dr. Kwesi Mensah", subject: "Literature", downloads: 456 },
+  ]);
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files) {
+      Array.from(files).forEach((file) => {
+        setUploadedFiles([...uploadedFiles, {
+          id: Date.now().toString(),
+          name: file.name,
+          status: "processing"
+        }]);
+      });
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noise"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "dashboard" },
+            { name: "Materials", id: "materials" },
+            { name: "My Uploads", id: "uploads" },
+            { name: "Home", id: "/" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{ text: "Start Learning Free", href: "contact" }}
+          brandName="AudioByte"
+        />
+      </div>
+
+      <main className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 pt-24 pb-12">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Header */}
+          <div className="mb-12">
+            <h1 className="text-4xl font-bold text-gray-900 mb-2">Your Learning Dashboard</h1>
+            <p className="text-gray-600">Upload lecture notes and access materials from creators and artists</p>
+          </div>
+
+          {/* Upload Section */}
+          <div className="bg-white rounded-lg shadow-md p-8 mb-12">
+            <div className="flex items-center gap-3 mb-6">
+              <Upload className="w-6 h-6 text-blue-600" />
+              <h2 className="text-2xl font-semibold text-gray-900">Generate Audio from Your Notes</h2>
+            </div>
+            <div className="border-2 border-dashed border-blue-300 rounded-lg p-8 text-center hover:border-blue-500 transition cursor-pointer">
+              <input
+                type="file"
+                multiple
+                onChange={handleFileUpload}
+                className="hidden"
+                id="file-upload"
+                accept=".pdf,.doc,.docx,.txt,.pptx"
+              />
+              <label htmlFor="file-upload" className="cursor-pointer">
+                <div className="mb-4">
+                  <Music className="w-12 h-12 text-blue-600 mx-auto mb-2" />
+                  <p className="text-lg font-medium text-gray-900">Drop files here or click to upload</p>
+                  <p className="text-sm text-gray-500 mt-2">Supports PDF, Word, PowerPoint, and text files</p>
+                </div>
+              </label>
+            </div>
+          </div>
+
+          {/* My Uploads */}
+          <div className="bg-white rounded-lg shadow-md p-8 mb-12">
+            <div className="flex items-center gap-3 mb-6">
+              <BookOpen className="w-6 h-6 text-green-600" />
+              <h2 className="text-2xl font-semibold text-gray-900">My Uploaded Materials</h2>
+            </div>
+            <div className="space-y-3">
+              {uploadedFiles.map((file) => (
+                <div key={file.id} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
+                  <div className="flex items-center gap-3 flex-1">
+                    <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                      <Music className="w-5 h-5 text-blue-600" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-gray-900">{file.name}</p>
+                      <p className="text-xs text-gray-500">
+                        {file.status === "processing" ? "Processing..." : "Ready to listen"}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {file.status === "ready" && file.audioUrl && (
+                      <>
+                        <button className="p-2 hover:bg-blue-100 rounded-lg transition text-blue-600" title="Play">
+                          <Play className="w-5 h-5" />
+                        </button>
+                        <button className="p-2 hover:bg-blue-100 rounded-lg transition text-blue-600" title="Download">
+                          <Download className="w-5 h-5" />
+                        </button>
+                      </>
+                    )}
+                    {file.status === "processing" && (
+                      <div className="animate-spin">
+                        <Music className="w-5 h-5 text-blue-600" />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Online Materials */}
+          <div className="bg-white rounded-lg shadow-md p-8">
+            <div className="flex items-center justify-between mb-6">
+              <div className="flex items-center gap-3">
+                <BookOpen className="w-6 h-6 text-purple-600" />
+                <h2 className="text-2xl font-semibold text-gray-900">Online Materials from Creators</h2>
+              </div>
+              <button className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
+                <Plus className="w-4 h-4" />
+                Add Material
+              </button>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {materials.map((material) => (
+                <div key={material.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-lg transition cursor-pointer">
+                  <div className="w-full h-32 bg-gradient-to-br from-purple-400 to-pink-400 rounded-lg mb-3 flex items-center justify-center">
+                    <BookOpen className="w-8 h-8 text-white" />
+                  </div>
+                  <h3 className="font-semibold text-gray-900 mb-1">{material.title}</h3>
+                  <p className="text-sm text-gray-600 mb-2">{material.creator}</p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">{material.subject}</span>
+                    <span className="text-xs text-gray-500">{material.downloads} downloads</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}