francy51
c24a6106bf
User-created dynamic doc pages live at /docs/custom/:slug, persisted in the new backend. The editor offers "Beautify with AI", which regenerates the page as structured HTML with Mermaid diagrams and replaces the raw markdown source (the beautified version becomes the page's canonical content and survives edits). Adds a DocHtml renderer that lazily renders Mermaid blocks, a purple design token, sidebar/topbar entries for custom pages, and routing.
45 lines
2.0 KiB
TypeScript
45 lines
2.0 KiB
TypeScript
import { Link, useLocation } from "react-router-dom";
|
|
import { pageTitles } from "../data/nav";
|
|
|
|
type TopBarProps = {
|
|
collapsed: boolean;
|
|
onToggle: () => void;
|
|
};
|
|
|
|
export function TopBar({ collapsed, onToggle }: TopBarProps) {
|
|
const location = useLocation();
|
|
const meta = pageTitles.get(location.pathname);
|
|
const section = meta?.section?.includes("Demo") || meta?.section?.includes("Prototype") ? "Demos" : "Docs";
|
|
let title = meta?.title ?? "Overview";
|
|
|
|
// Custom (dynamic) pages aren't in the static pageTitles registry.
|
|
if (location.pathname.startsWith("/docs/custom")) {
|
|
if (location.pathname === "/docs/custom") title = "Custom Pages";
|
|
else if (location.pathname.endsWith("/new")) title = "New Page";
|
|
else title = "Custom Page";
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-topbar min-h-topbar min-w-0 items-center gap-4 border-b border-border bg-surface px-5 text-[0.8rem] max-md:gap-2 max-md:px-3">
|
|
<button
|
|
className="flex cursor-pointer items-center rounded border border-border bg-transparent px-2 py-1 text-base text-muted transition-all duration-150 hover:border-border-light hover:text-fg"
|
|
onClick={onToggle}
|
|
>
|
|
{collapsed ? "→" : "←"}
|
|
</button>
|
|
<div className="flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap font-mono text-[0.75rem] text-muted max-md:flex-1">
|
|
<Link className="text-inherit no-underline" to="/">VOID::NAV</Link>
|
|
<span className="text-border-light">/</span>
|
|
<span>{section}</span>
|
|
<span className="text-border-light">/</span>
|
|
<span className="overflow-hidden text-ellipsis text-fg-bright">{title}</span>
|
|
</div>
|
|
<div className="ml-auto flex items-center gap-4 whitespace-nowrap font-mono text-[0.7rem] text-muted max-md:hidden">
|
|
<span><span className="mr-1 inline-block size-1.5 rounded-full bg-green shadow-[0_0_6px_var(--color-green)]" /> Connected</span>
|
|
<span className="text-accent">●</span>
|
|
<span>Prototype v0.1.0</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|