Update src/app/dashboard/page.tsx

This commit is contained in:
2026-04-23 10:09:45 +00:00
parent 9484623922
commit 2a2ba4d895

View File

@@ -4,7 +4,8 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import { Users, TrendingUp, Award, Settings, Bell, User, BarChart, Activity } from "lucide-react";
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { BarChart3, TrendingUp, Users, Clock, Award } from "lucide-react";
export default function DashboardPage() {
return (
@@ -22,65 +23,42 @@ export default function DashboardPage() {
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Dashboard", id: "/dashboard" },
{ name: "Reports", id: "#" },
{ name: "Settings", id: "#" },
{ name: "Profile", id: "#" }
{ name: "Contact", id: "/contact" }
]}
brandName="MentorEdge"
/>
</div>
<main className="pt-20 pb-20 px-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="col-span-1 md:col-span-2">
<MetricCardThree
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", title: "Total Active Mentees", value: "1,240", icon: Users },
{ id: "m2", title: "Monthly Growth", value: "12.5%", icon: TrendingUp },
{ id: "m3", title: "Engagement Score", value: "94", icon: Award }
]}
title="Performance Overview"
description="Real-time data visualization of your mentorship activity."
/>
</div>
<div className="bg-card p-6 rounded-lg shadow-lg border">
<h3 className="text-xl font-semibold mb-4 flex items-center gap-2"><Bell className="w-5 h-5" /> Notifications</h3>
<p className="text-muted-foreground">No pending alerts for your current mentorship sessions.</p>
</div>
</div>
<div className="pt-32 pb-20" id="dashboard-metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "d1", title: "Total Sessions", value: "128", icon: Users },
{ id: "d2", title: "Hours Mentored", value: "240h", icon: Clock },
{ id: "d3", title: "Growth Score", value: "+24%", icon: TrendingUp },
{ id: "d4", title: "Achievements", value: "14", icon: Award }
]}
title="Your Dashboard"
description="Track your progress and mentorship activity at a glance."
/>
</div>
<div className="mt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="bg-card p-6 rounded-lg shadow-lg border">
<h3 className="text-xl font-semibold mb-4 flex items-center gap-2"><BarChart className="w-5 h-5" /> Session Analytics</h3>
<div className="h-48 flex items-center justify-center border-dashed border-2 rounded">
<Activity className="w-12 h-12 text-primary opacity-50 animate-pulse" />
</div>
</div>
<div className="bg-card p-6 rounded-lg shadow-lg border">
<h3 className="text-xl font-semibold mb-4 flex items-center gap-2"><User className="w-5 h-5" /> User Profile</h3>
<div className="flex items-center gap-4">
<div className="w-16 h-16 rounded-full bg-accent"></div>
<div>
<p className="font-bold">Senior Mentor</p>
<p className="text-sm">Lead Software Architect</p>
</div>
</div>
</div>
</div>
<div className="mt-10">
<button className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-cta-text rounded">
<Settings className="w-4 h-4" /> Configure Dashboard Settings
</button>
</div>
</main>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "Dashboard", href: "/dashboard" }, { label: "Settings", href: "#" }] },
{ items: [{ label: "Support", href: "#" }, { label: "Terms", href: "#" }] }
]}
logoText="MentorEdge"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}