71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
import Link from "next/link";
|
|
import { Network, NotebookTabs, PanelsTopLeft, ScrollText, Send, Settings2, ShieldEllipsis, UsersRound } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const navItems = [
|
|
{ href: "/tasks", label: "Tasks", icon: PanelsTopLeft },
|
|
{ href: "/agents", label: "Agents", icon: UsersRound },
|
|
{ href: "/openclaw", label: "OpenClaw", icon: ShieldEllipsis },
|
|
{ href: "/zeroclaw", label: "ZeroClaw", icon: Send },
|
|
{ href: "/dispatch", label: "Dispatch", icon: Send },
|
|
{ href: "/architecture", label: "Architecture", icon: Network },
|
|
{ href: "/wiki", label: "Wiki", icon: NotebookTabs },
|
|
{ href: "/usage", label: "Usage", icon: ScrollText },
|
|
{ href: "/gitea", label: "Gitea", icon: Settings2 },
|
|
];
|
|
|
|
export function AppShell({
|
|
pathname,
|
|
children,
|
|
}: {
|
|
pathname: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.18),_transparent_30%),radial-gradient(circle_at_top_right,_rgba(245,158,11,0.14),_transparent_28%),linear-gradient(180deg,#07111f_0%,#091321_44%,#0f172a_100%)] text-foreground">
|
|
<header className="border-b border-white/10 bg-slate-950/60 backdrop-blur-xl">
|
|
<div className="mx-auto flex w-full max-w-[1760px] items-center justify-between px-6 py-6">
|
|
<div>
|
|
<p className="font-mono text-xs uppercase tracking-[0.3em] text-cyan-300/80">
|
|
OpenClaw Taskboard
|
|
</p>
|
|
<h1 className="mt-1 text-2xl font-semibold tracking-tight text-white">
|
|
Claw Fleet Console
|
|
</h1>
|
|
<p className="mt-1 max-w-2xl text-sm text-slate-300">
|
|
Unified operations view for OpenClaw orchestration, ZeroClaw host runtimes, and deployed architecture.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="mx-auto grid w-full max-w-[1760px] gap-6 px-6 py-8 lg:grid-cols-[240px_minmax(0,1fr)] xl:grid-cols-[252px_minmax(0,1fr)]">
|
|
<nav className="space-y-2 lg:sticky lg:top-8 lg:self-start">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-xl border px-4 py-3 text-sm transition",
|
|
isActive
|
|
? "border-cyan-300/30 bg-cyan-300/10 text-cyan-100 shadow-panel"
|
|
: "border-white/10 bg-slate-950/35 text-slate-300 hover:border-white/20 hover:bg-white/5 hover:text-white",
|
|
)}
|
|
href={item.href}
|
|
key={item.href}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<main className="min-w-0">{children}</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|