36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
|
import Link from "next/link";
|
||
|
|
import { Gauge, MonitorPlay, Shield, UserRoundPlus, UsersRound } from "lucide-react";
|
||
|
|
|
||
|
|
const nav = [
|
||
|
|
{ href: "/dashboard", label: "Dashboard", icon: Gauge },
|
||
|
|
{ href: "/rooms/@admin", label: "Rooms", icon: MonitorPlay },
|
||
|
|
{ href: "/friends", label: "Friends", icon: UsersRound },
|
||
|
|
{ href: "/admin", label: "Admin", icon: Shield },
|
||
|
|
{ href: "/setup", label: "Setup", icon: UserRoundPlus }
|
||
|
|
];
|
||
|
|
|
||
|
|
export function AppShell({ children, active = "Dashboard" }: { children: React.ReactNode; active?: string }) {
|
||
|
|
return (
|
||
|
|
<div className="app-shell">
|
||
|
|
<aside className="sidebar">
|
||
|
|
<Link className="brand" href="/dashboard">
|
||
|
|
<span className="brand-mark">WL</span>
|
||
|
|
<span>WatchLink</span>
|
||
|
|
</Link>
|
||
|
|
<nav className="nav-list" aria-label="Primary">
|
||
|
|
{nav.map((item) => {
|
||
|
|
const Icon = item.icon;
|
||
|
|
return (
|
||
|
|
<Link key={item.href} href={item.href} className={`nav-item ${active === item.label ? "active" : ""}`}>
|
||
|
|
<Icon size={17} />
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
<main className="main">{children}</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|