BJORK Route trace

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useMemo, useState } from "react";
import { RouteTrace, type RouteEdge, type RouteNode } from "@/components/ui/bjork-route-trace";

const NODES: RouteNode[] = [
  { id: "client", label: "Client", sublabel: "web", col: 0, row: 1 },
  { id: "edge", label: "Edge", sublabel: "cdn", col: 1, row: 1 },
  { id: "gateway", label: "Gateway", sublabel: "api", col: 2, row: 1 },
  { id: "auth", label: "Auth", sublabel: "sessions", col: 3, row: 0 },
  { id: "search", label: "Search", sublabel: "index", col: 3, row: 1 },
  { id: "billing", label: "Billing", sublabel: "invoices", col: 3, row: 2 },
  { id: "postgres", label: "Postgres", sublabel: "primary", col: 4, row: 1 },
];

const EDGE_TEMPLATE: RouteEdge[] = [
  { from: "client", to: "edge", throughput: 0.9 },
  { from: "edge", to: "gateway", throughput: 0.85 },
  { from: "gateway", to: "auth", throughput: 0.3 },
  { from: "gateway", to: "search", throughput: 0.7 },
  { from: "gateway", to: "billing", throughput: 0.2 },
  { from: "search", to: "postgres", throughput: 0.6 },
  { from: "billing", to: "postgres", throughput: 0.15 },
  { from: "auth", to: "postgres", throughput: 0.25 },
];

const DEMO_CELL = { w: 124, h: 88 };
function SourceDemo(){
const isPreview = false;
const [downIds, setDownIds] = useState<Record<string, boolean>>({});
const [searchThroughput, setSearchThroughput] = useState(0.7);
const [speed, setSpeed] = useState(1);
const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
const nodes = useMemo<RouteNode[]>(() => {
    if (isPreview) {
      return NODES.map((n) => (n.id === "billing" ? { ...n, status: "down" } : n));
    }
    return NODES.map((n) => ({ ...n, status: downIds[n.id] ? "down" : "ok" }));
  }, [isPreview, downIds]);
const edges = useMemo<RouteEdge[]>(
    () =>
      EDGE_TEMPLATE.map((e) =>
        e.from === "gateway" && e.to === "search" ? { ...e, throughput: searchThroughput } : e,
      ),
    [searchThroughput],
  );
const reset = () => {
    setDownIds({});
    setSearchThroughput(0.7);
    setSpeed(1);
  };
return <>

      <div className="flex w-full min-w-0 flex-col items-center gap-6">
        <div className={isPreview ? "w-[min(920px,calc(100vw-56px))] min-w-0" : "w-[min(760px,calc(100vw-56px))] lg:w-[min(760px,calc(50vw-128px))] min-w-0"}>
          <RouteTrace
            className="w-full"
            nodes={nodes}
            edges={edges}
            cell={DEMO_CELL}
            speed={speed}
            selectedId={selectedId}
            onNodeSelect={setSelectedId}
            ariaLabel="Route trace demo"
            frozen={isPreview}
            attract={false}
          />
        </div>
      </div>
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}