diff options
| author | ertopogo <erwin.t.pombett@gmail.com> | 2026-04-06 13:50:16 +0200 |
|---|---|---|
| committer | ertopogo <erwin.t.pombett@gmail.com> | 2026-04-06 13:50:16 +0200 |
| commit | 96615b46a72e7902f7ade2619b21649bf41b2b1b (patch) | |
| tree | d33c565ddf80ca3e5b1809d361470dea29d86ea2 /src/components/demos/zero-trust/ZTFlowNode.tsx | |
| parent | 202f3256fa1bb60a72322ca1c4c3b5e6ffca212a (diff) | |
documentation zero trust
Diffstat (limited to 'src/components/demos/zero-trust/ZTFlowNode.tsx')
| -rw-r--r-- | src/components/demos/zero-trust/ZTFlowNode.tsx | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/src/components/demos/zero-trust/ZTFlowNode.tsx b/src/components/demos/zero-trust/ZTFlowNode.tsx new file mode 100644 index 0000000..571f86c --- /dev/null +++ b/src/components/demos/zero-trust/ZTFlowNode.tsx @@ -0,0 +1,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>
+ );
+}
|