status-edge-demo

1"use client";
2 
3import "@xyflow/react/dist/style.css";
4 
5import { Background, ReactFlow, ReactFlowProvider } from "@xyflow/react";
6 
7import { StatusEdge } from "@/registry/ui/flow/status-edge";
8 
9const defaultNodes = [
10	{
11		id: "1",
12		position: { x: 200, y: 200 },
13		data: { label: "Node" },
14	},
15	{
16		id: "2",
17		position: { x: 400, y: 400 },
18		data: { label: "Node" },
19	},
20];
21 
22const defaultEdges = [
23	{
24		id: "e1-2",
25		source: "1",
26		target: "2",
27		type: "status",
28		data: {
29			error: true,
30		},
31	},
32];
33 
34const edgeTypes = {
35	status: StatusEdge,
36};
37 
38export default function StatusEdgeDemo() {
39	const defaultViewport = { x: -100, y: -100, zoom: 1.1 };
40 
41	return (
42		<div className="w-full h-full">
43			<ReactFlowProvider>
44				<ReactFlow
45					defaultNodes={defaultNodes}
46					defaultEdges={defaultEdges}
47					edgeTypes={edgeTypes}
48					defaultViewport={defaultViewport}
49				>
50					<Background />
51				</ReactFlow>
52			</ReactFlowProvider>
53		</div>
54	);
55}