1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
"use client";
import { Handle, Position, type NodeProps } from "@xyflow/react";
import {
Activity,
Database,
KeyRound,
Laptop,
Network,
Server,
Shield,
User,
} from "lucide-react";
import type { ZTNodeData } from "./types";
import { cn } from "@/lib/utils";
const kindIcon = {
user: User,
device: Laptop,
idp: KeyRound,
gateway: Shield,
workload: Server,
data: Database,
network: Network,
monitoring: Activity,
};
const handleClass =
"!h-2 !w-2 !border-cosmos-500 !bg-araucaria-400";
export function ZTFlowNode({ data }: NodeProps) {
const d = data as ZTNodeData;
const Icon = kindIcon[d.kind];
return (
<div
className={cn(
"rounded-xl border-2 border-cosmos-600 bg-cosmos-900 px-3 py-2.5 shadow-lg",
"min-w-[130px] max-w-[180px] text-left",
)}
>
<Handle
type="target"
position={Position.Top}
id="top-t"
className={cn(handleClass, "!left-[25%]")}
/>
<Handle
type="source"
position={Position.Top}
id="top-s"
className={cn(handleClass, "!left-[75%]")}
/>
<Handle
type="target"
position={Position.Bottom}
id="bot-t"
className={cn(handleClass, "!left-[25%]")}
/>
<Handle
type="source"
position={Position.Bottom}
id="bot-s"
className={cn(handleClass, "!left-[75%]")}
/>
<Handle
type="target"
position={Position.Left}
id="left-t"
className={cn(handleClass, "!top-[35%]")}
/>
<Handle
type="source"
position={Position.Left}
id="left-s"
className={cn(handleClass, "!top-[65%]")}
/>
<Handle
type="target"
position={Position.Right}
id="right-t"
className={cn(handleClass, "!top-[35%]")}
/>
<Handle
type="source"
position={Position.Right}
id="right-s"
className={cn(handleClass, "!top-[65%]")}
/>
<div className="flex items-start gap-2">
<div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cosmos-800 text-araucaria-400">
<Icon className="h-4 w-4" aria-hidden />
</div>
<div className="min-w-0">
<p className="text-[10px] font-medium uppercase tracking-wide text-cosmos-500">
{d.role}
</p>
<p className="text-sm font-semibold leading-snug text-nieve">{d.label}</p>
</div>
</div>
</div>
);
}
|
