Add src/app/dashboard/page.tsx
This commit is contained in:
135
src/app/dashboard/page.tsx
Normal file
135
src/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import { LayoutDashboard, Settings, BarChart, CalendarDays, Search as SearchIcon } from "lucide-react";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const navItemsForDashboard = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "/#features" },
|
||||
{ name: "Tools", id: "/#tools" },
|
||||
{ name: "Insights", id: "/#insights" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
{ name: "Dashboard", id: "/dashboard" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmall"
|
||||
background="aurora"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={navItemsForDashboard}
|
||||
brandName="Yt Mugi"
|
||||
button={{ text: "Reset / Change API Key", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-background-accent p-4 md:p-6 lg:p-8">
|
||||
{/* Dashboard Header */}
|
||||
<header className="bg-card shadow-sm rounded-lg p-4 mb-4 flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-foreground">
|
||||
<LayoutDashboard className="inline-block mr-3 text-primary-cta" size={28} />
|
||||
Dashboard Overview
|
||||
</h1>
|
||||
{/* Additional header elements like user menu, notifications */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-sm text-foreground hidden sm:block">Welcome, Creator!</span>
|
||||
{/* User Avatar Placeholder */}
|
||||
<div className="w-10 h-10 rounded-full bg-primary-cta flex items-center justify-center text-white text-lg font-semibold">
|
||||
YC
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Grid: Sidebar + Content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[250px_1fr] gap-6"> { /* Increased gap for better separation */}
|
||||
{/* Sidebar */}
|
||||
<aside className="bg-card shadow-sm rounded-lg p-4">
|
||||
<h2 className="text-xl font-semibold text-foreground mb-4">Navigation</h2>
|
||||
<nav>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<a href="/dashboard" className="flex items-center text-primary-cta hover:text-accent p-3 rounded-md transition-colors duration-200">
|
||||
<LayoutDashboard size={20} className="mr-2" />
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="flex items-center text-foreground hover:text-primary-cta p-3 rounded-md transition-colors duration-200">
|
||||
<BarChart size={20} className="mr-2" />
|
||||
Analytics
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="flex items-center text-foreground hover:text-primary-cta p-3 rounded-md transition-colors duration-200">
|
||||
<CalendarDays size={20} className="mr-2" />
|
||||
Content Planner
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="flex items-center text-foreground hover:text-primary-cta p-3 rounded-md transition-colors duration-200">
|
||||
<SearchIcon size={20} className="mr-2" />
|
||||
SEO Tools
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="flex items-center text-foreground hover:text-primary-cta p-3 rounded-md transition-colors duration-200">
|
||||
<Settings size={20} className="mr-2" />
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="bg-card shadow-sm rounded-lg p-6">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-6">Main Content Area</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{/* Placeholder Cards */}
|
||||
<div className="bg-background-accent p-5 rounded-lg text-foreground shadow-inner">
|
||||
<h3 className="font-semibold text-lg mb-2">Metric Card</h3>
|
||||
<p className="text-3xl font-extrabold text-primary-cta">12.5K</p>
|
||||
<p className="text-sm mt-1">Total Views this Month</p>
|
||||
</div>
|
||||
<div className="bg-background-accent p-5 rounded-lg text-foreground shadow-inner">
|
||||
<h3 className="font-semibold text-lg mb-2">Engagement Rate</h3>
|
||||
<p className="text-3xl font-extrabold text-accent">7.2%</p>
|
||||
<p className="text-sm mt-1">Up 1.2% from last week</p>
|
||||
</div>
|
||||
<div className="bg-background-accent p-5 rounded-lg text-foreground shadow-inner">
|
||||
<h3 className="font-semibold text-lg mb-2">Subscribers</h3>
|
||||
<p className="text-3xl font-extrabold text-primary-cta">+850</p>
|
||||
<p className="text-sm mt-1">New subscribers this month</p>
|
||||
</div>
|
||||
<div className="bg-background-accent p-5 rounded-lg text-foreground shadow-inner">
|
||||
<h3 className="font-semibold text-lg mb-2">Top Video</h3>
|
||||
<p className="text-base font-medium text-foreground truncate">"My Secret to Viral Content"</p>
|
||||
<p className="text-sm mt-1 text-gray-500">250K views</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-8 text-foreground leading-relaxed">
|
||||
This responsive grid system provides a flexible foundation for various dashboard widgets and data visualizations.
|
||||
It adapts seamlessly to different screen sizes, ensuring an optimal user experience whether on a desktop, tablet, or mobile device.
|
||||
Future components will fill these content areas.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user