41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import Link from "next/link";
|
|
|
|
type ActiveNavItem = "calendar" | "availability" | "connections";
|
|
type NavItem = { id: ActiveNavItem; href: string; label: string };
|
|
|
|
const navItems: NavItem[] = [
|
|
{ id: "calendar", href: "/calendar", label: "Calendar" },
|
|
{ id: "availability", href: "/availability", label: "Availability" },
|
|
{ id: "connections", href: "/connections", label: "Connections" },
|
|
];
|
|
|
|
export function AppShell({
|
|
active,
|
|
user,
|
|
children,
|
|
}: {
|
|
active: ActiveNavItem;
|
|
user: { name: string; timeZone: string };
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="app-frame">
|
|
<aside className="sidebar">
|
|
<div className="brand">Vynte Schedule</div>
|
|
<nav className="nav-list" aria-label="Scheduler navigation">
|
|
{navItems.map((item) => (
|
|
<Link key={item.id} className="nav-item" data-active={item.id === active} href={item.href}>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="profile-block">
|
|
<strong>{user.name}</strong>
|
|
<span>{user.timeZone}</span>
|
|
</div>
|
|
</aside>
|
|
<main className="main-surface">{children}</main>
|
|
</div>
|
|
);
|
|
}
|