Merge version_4 into main #3
168
src/app/dashboard/page.tsx
Normal file
168
src/app/dashboard/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Poppins } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
const poppins = Poppins({
|
||||
variable: "--font-poppins", subsets: ["latin"],
|
||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -26,7 +27,7 @@ export default function RootLayout({
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${inter.variable} antialiased`}
|
||||
className={`${poppins.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
@@ -31,7 +31,7 @@ export default function LandingPage() {
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{ text: "Start Learning Free", href: "contact" }}
|
||||
@@ -244,7 +244,7 @@ export default function LandingPage() {
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
font-family: var(--font-poppins), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
font-family: var(--font-poppins), sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user