59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import Link from "next/link";
|
|
import { Gauge, MonitorPlay, Shield, UsersRound } from "lucide-react";
|
|
import { Avatar } from "./avatar";
|
|
|
|
export function AppShell({
|
|
children,
|
|
active = "Dashboard",
|
|
isAdmin = false,
|
|
roomHref = "/dashboard",
|
|
userName
|
|
}: {
|
|
children: React.ReactNode;
|
|
active?: string;
|
|
isAdmin?: boolean;
|
|
roomHref?: string;
|
|
userName?: string;
|
|
}) {
|
|
const nav = [
|
|
{ href: "/dashboard", label: "Dashboard", icon: Gauge },
|
|
{ href: roomHref, label: "Rooms", icon: MonitorPlay },
|
|
{ href: "/friends", label: "Friends", icon: UsersRound }
|
|
];
|
|
const visibleNav = isAdmin
|
|
? [nav[0], nav[1], nav[2], { href: "/admin", label: "Admin", icon: Shield }]
|
|
: nav;
|
|
|
|
return (
|
|
<div className="app-shell">
|
|
<aside className="sidebar">
|
|
<Link className="brand" href="/dashboard">
|
|
<span className="brand-mark" aria-hidden="true" />
|
|
<span>WatchLink</span>
|
|
</Link>
|
|
<nav className="nav-list" aria-label="Primary">
|
|
{visibleNav.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>
|
|
{userName ? (
|
|
<div className="sidebar-user">
|
|
<Avatar name={userName} />
|
|
<div className="row-title">
|
|
<strong>{userName}</strong>
|
|
<span>{isAdmin ? "Administrator" : "Member"}</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</aside>
|
|
<main className="main">{children}</main>
|
|
</div>
|
|
);
|
|
}
|