Canvas: Render network nodes

Change-Id: I63938da205af9377a1e210c0e972591142211a68
diff --git a/apps/canvas/front/src/components/node-network.tsx b/apps/canvas/front/src/components/node-network.tsx
new file mode 100644
index 0000000..9a241fa
--- /dev/null
+++ b/apps/canvas/front/src/components/node-network.tsx
@@ -0,0 +1,22 @@
+import { NodeRect } from './node-rect';
+import { nodeLabel, NetworkNode } from '@/lib/state';
+import { Handle, Position } from "@xyflow/react";
+
+export function NodeNetwork(node: NetworkNode) {
+    const { id, selected } = node;
+    return (
+        <NodeRect id={id} selected={selected} type={node.type} state={node.data.state}>
+            <div style={{ padding: '10px 20px' }}>
+                {nodeLabel(node)}
+                <Handle
+                    id="subdomain"
+                    type={"target"}
+                    position={Position.Bottom}
+                    isConnectableStart={true}
+                    isConnectableEnd={true}
+                    isConnectable={true}
+                />
+            </div>
+        </NodeRect>
+    );
+}