Status Edge

1import {
2	type Edge,
3	type EdgeProps,
4	BaseEdge as FlowBaseEdge,
5	getBezierPath,
6} from "@xyflow/react";
7import type { CSSProperties } from "react";
8 
9export type StatusEdge = Edge<
10	{
11		error?: boolean;
12	},
13	"status"
14> & {
15	type: "status";
16	sourceHandle: string;
17	targetHandle: string;
18};
19 
20export function StatusEdge({
21	sourceX,
22	sourceY,
23	targetX,
24	targetY,
25	sourcePosition,
26	targetPosition,
27	data,
28	selected,
29}: EdgeProps<StatusEdge>) {
30	const [edgePath] = getBezierPath({
31		sourceX,
32		sourceY,
33		sourcePosition,
34		targetX,
35		targetY,
36		targetPosition,
37	});
38 
39	const edgeStyle: CSSProperties = {
40		stroke: data?.error ? "#ef4444" : selected ? "#3b82f6" : "#b1b1b7",
41		strokeWidth: selected ? 3 : 2,
42		transition: "stroke 0.2s, stroke-width 0.2s",
43	};
44 
45	return <FlowBaseEdge path={edgePath} style={edgeStyle} />;
46}