A visual signal-routing control that draws connections as hanging cables between source and destination jacks, refusing incompatible plugs and fully operable from the keyboard.
"use client";
import { PatchBay, type Input, type Jack } from "@/components/ui/patch-bay";
const OUTPUTS: Jack[] = [
{ id: "form", name: "Signup form", type: "JSON" },
{ id: "cam", name: "Studio camera", type: "video" },
{ id: "mic", name: "Desk mic", type: "audio" },
{ id: "sensor", name: "Humidity sensor", type: "number" },
{ id: "docs", name: "Docs export", type: "text" },
];
const INPUTS: Input[] = [
{ id: "hook", name: "Webhook", accepts: ["JSON"] },
{ id: "rec", name: "Recorder", accepts: ["video", "audio"] },
{ id: "chart", name: "Dashboard chart", accepts: ["number"] },
{ id: "index", name: "Search index", accepts: ["text", "JSON"] },
{ id: "spk", name: "Speakers", accepts: ["audio"] },
];
export default function PatchBayDarkDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6 text-foreground">
<div className="w-full max-w-[46rem]">
<PatchBay
title="Masar studio routing"
outputs={OUTPUTS}
inputs={INPUTS}
defaultCables={[
{ from: "form", to: "hook" },
{ from: "cam", to: "rec" },
{ from: "sensor", to: "chart" },
]}
theme="dark"
/>
</div>
</div>
);
}
