75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
import { useTheme } from "next-themes";
|
||
|
|
import { Moon, Sun } from "lucide-react";
|
||
|
|
import { navItems } from "@/lib/navigation";
|
||
|
|
import { useAmbient } from "@/components/ambient/ambient-context";
|
||
|
|
import { ConnectionStatus } from "./status-dot";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
function useActiveLabel() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
const item = [...navItems]
|
||
|
|
.sort((a, b) => b.matchPrefix.length - a.matchPrefix.length)
|
||
|
|
.find((i) => pathname.startsWith(i.matchPrefix));
|
||
|
|
return item?.label ?? "Console";
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TopBar() {
|
||
|
|
const label = useActiveLabel();
|
||
|
|
const { state } = useAmbient();
|
||
|
|
const { theme, setTheme } = useTheme();
|
||
|
|
const [mounted, setMounted] = useState(false);
|
||
|
|
useEffect(() => setMounted(true), []);
|
||
|
|
|
||
|
|
const signalTone =
|
||
|
|
state.tone === "vermilion"
|
||
|
|
? "text-vermilion"
|
||
|
|
: state.tone === "amber"
|
||
|
|
? "text-amber"
|
||
|
|
: "text-signal";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="sticky top-0 z-40 flex items-center gap-4 px-5 py-3.5">
|
||
|
|
<div className="flex min-w-0 items-baseline gap-3">
|
||
|
|
<span className="eyebrow">GMW</span>
|
||
|
|
<h1 className="display truncate text-[1.5rem] text-ink">{label}</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="ml-auto flex items-center gap-3">
|
||
|
|
<span className={cn("pill", signalTone)}>
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
"size-1.5 rounded-full bg-current animate-breathe",
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
{state.label ?? "nominal"}
|
||
|
|
</span>
|
||
|
|
<ConnectionStatus />
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
aria-label="Open command palette"
|
||
|
|
onClick={() => window.dispatchEvent(new Event("command-palette:open"))}
|
||
|
|
className="hidden items-center gap-1.5 rounded-[11px] border border-hairline bg-white/5 px-2.5 py-1.5 text-xs text-ink-soft transition-colors hover:text-ink hover:border-signal/40 sm:flex"
|
||
|
|
>
|
||
|
|
<span className="mono text-[0.65rem]">⌘K</span>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
aria-label="Toggle theme"
|
||
|
|
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
|
||
|
|
className="flex size-9 items-center justify-center rounded-[11px] border border-hairline bg-white/5 text-ink-soft transition-colors hover:text-ink hover:border-signal/40"
|
||
|
|
>
|
||
|
|
{mounted && theme === "light" ? (
|
||
|
|
<Moon className="size-4" />
|
||
|
|
) : (
|
||
|
|
<Sun className="size-4" />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|