90 lines
3.5 KiB
TypeScript
90 lines
3.5 KiB
TypeScript
import Link from "next/link"
|
|
import { LayoutDashboard, Calendar, FileBarChart, Upload, Download, Settings } from "lucide-react"
|
|
|
|
const navItems = [
|
|
{ href: "/dashboard", label: "Overview", icon: LayoutDashboard },
|
|
{ href: "/dashboard/events", label: "Events", icon: Calendar },
|
|
{ href: "/dashboard/pledges", label: "Pledges", icon: FileBarChart },
|
|
{ href: "/dashboard/reconcile", label: "Reconcile", icon: Upload },
|
|
{ href: "/dashboard/exports", label: "Exports", icon: Download },
|
|
{ href: "/dashboard/settings", label: "Settings", icon: Settings },
|
|
]
|
|
|
|
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50/50">
|
|
{/* Top bar */}
|
|
<header className="sticky top-0 z-40 border-b bg-white/80 backdrop-blur-xl">
|
|
<div className="flex h-16 items-center gap-4 px-6">
|
|
<Link href="/dashboard" className="flex items-center gap-2">
|
|
<div className="h-8 w-8 rounded-lg bg-trust-blue flex items-center justify-center">
|
|
<span className="text-white font-bold text-sm">P</span>
|
|
</div>
|
|
<span className="font-bold text-lg hidden sm:block">Pledge Now, Pay Later</span>
|
|
</Link>
|
|
<div className="flex-1" />
|
|
<Link
|
|
href="/"
|
|
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
View Public Site
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="flex">
|
|
{/* Sidebar */}
|
|
<aside className="hidden md:flex w-64 flex-col border-r bg-white min-h-[calc(100vh-4rem)] p-4">
|
|
<nav className="space-y-1">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-gray-100 hover:text-foreground transition-colors"
|
|
>
|
|
<item.icon className="h-4 w-4" />
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Upsell CTA */}
|
|
<div className="mt-auto pt-4">
|
|
<div className="rounded-2xl bg-gradient-to-br from-trust-blue/5 to-warm-amber/5 border p-4 space-y-2">
|
|
<p className="text-sm font-semibold">Need tech leadership?</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
Get a fractional Head of Technology to optimise your charity's digital stack.
|
|
</p>
|
|
<Link
|
|
href="/dashboard/apply"
|
|
className="inline-block text-xs font-semibold text-trust-blue hover:underline"
|
|
>
|
|
Learn more →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Mobile bottom nav */}
|
|
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t bg-white/80 backdrop-blur-xl flex justify-around py-2">
|
|
{navItems.slice(0, 5).map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="flex flex-col items-center gap-1 p-2 text-muted-foreground hover:text-trust-blue transition-colors"
|
|
>
|
|
<item.icon className="h-5 w-5" />
|
|
<span className="text-[10px] font-medium">{item.label}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Main content */}
|
|
<main className="flex-1 p-4 md:p-8 pb-20 md:pb-8">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|