70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
 
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import { usePathname, useRouter } from "next/navigation";
|
||
|
|
import { Terminal, History, LogOut } from "lucide-react";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
const links = [
|
||
|
|
{ href: "/", label: "Scripts", icon: Terminal },
|
||
|
|
{ href: "/runs", label: "History", icon: History },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function Nav({
|
||
|
|
authEnabled,
|
||
|
|
username,
|
||
|
|
}: {
|
||
|
|
authEnabled: boolean;
|
||
|
|
username: string | null;
|
||
|
|
}) {
|
||
|
|
const pathname = usePathname();
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
async function handleLogout() {
|
||
|
|
await fetch("/api/auth/logout", { method: "POST" });
|
||
|
|
router.push("/login");
|
||
|
|
router.refresh();
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="border-b bg-background/95 sticky top-0 z-10 backdrop-blur">
|
||
|
|
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
|
||
|
|
<div className="flex items-center gap-6">
|
||
|
|
<Link
|
||
|
|
href="/"
|
||
|
|
className="flex items-center gap-2 font-semibold tracking-tight"
|
||
|
|
>
|
||
|
|
<Terminal className="size-5" />
|
||
|
|
TriggerShell
|
||
|
|
</Link>
|
||
|
|
<nav className="flex items-center gap-1">
|
||
|
|
{links.map(({ href, label, icon: Icon }) => (
|
||
|
|
<Link
|
||
|
|
key={href}
|
||
|
|
href={href}
|
||
|
|
className={cn(
|
||
|
|
"text-muted-foreground hover:text-foreground flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
|
||
|
|
pathname === href && "bg-muted text-foreground",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon className="size-4" />
|
||
|
|
{label}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
{authEnabled && (
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<span className="text-muted-foreground text-sm">{username}</span>
|
||
|
|
<Button variant="ghost" size="sm" onClick={handleLogout}>
|
||
|
|
<LogOut className="size-4" />
|
||
|
|
Log out
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|