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>
+  );
+}