tegwick
b5b6f6bc00
CONTENT-WP-0004 keeps outgoing and incoming labels apart, limits the graph to two hops, and stores focus and detail in the URL. Assistant: grok Assistant-Session: 01a1531b-6698-7732-8587-f28ea604bcdf
36 lines
1.8 KiB
TypeScript
36 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import type { DataspaceNav } from "@/lib/catalog";
|
|
|
|
/**
|
|
* Sticky header shell adapted from OnCo SiteHeader.
|
|
* https://github.com/judegomila/OnCo @ b594d7433bf4e408b44215e25e5304696d6f840e
|
|
* Copyright (c) 2026 OnCo. MIT License. See ui/NOTICE.
|
|
* The OnCo mark and command palette are not included.
|
|
* Kind links come from the snapshot registry passed in by the layout.
|
|
*/
|
|
export function SiteHeader({ dataspaces }: { dataspaces: DataspaceNav[] }) {
|
|
const path = usePathname() ?? "/";
|
|
const active = dataspaces.find((item) => path === `/${item.id}` || path.startsWith(`/${item.id}/`)) ?? dataspaces.find((item) => item.id === "systems-thinking") ?? dataspaces[0];
|
|
return (
|
|
<header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-md supports-[backdrop-filter]:bg-background/75">
|
|
<div className="mx-auto flex min-h-14 max-w-7xl flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2 sm:h-14 sm:flex-nowrap sm:gap-6 sm:px-6 sm:py-0">
|
|
<a href="/" className="inline-flex h-10 shrink-0 items-center rounded-lg font-semibold tracking-tight" aria-label="Content Explorer home">
|
|
<span className="text-[15px]">Content Explorer</span>
|
|
</a>
|
|
{active ? (
|
|
<nav aria-label="Primary" className="flex min-w-0 items-center gap-4 overflow-x-auto text-sm">
|
|
<a href={`/${active.id}/`} className="shrink-0 text-foreground">{active.title}</a>
|
|
<a href={`/${active.id}/graph/`} className="shrink-0 text-muted hover:text-foreground">Graph</a>
|
|
{active.kinds.map((kind) => (
|
|
<a key={kind.id} href={kind.href} className="shrink-0 text-muted hover:text-foreground">
|
|
{kind.plural}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
) : null}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|