Canvas: build application infrastructure with drag and drop
Change-Id: I5cfd12e67794f3376c5c025af29470d52d77cf16
diff --git a/apps/canvas/src/components/node-mongodb.tsx b/apps/canvas/src/components/node-mongodb.tsx
new file mode 100644
index 0000000..f75b7b9
--- /dev/null
+++ b/apps/canvas/src/components/node-mongodb.tsx
@@ -0,0 +1,29 @@
+import { NodeRect } from './node-rect';
+import { MongoDBNode, nodeLabel } from '@/lib/state';
+import { Handle, Position } from "@xyflow/react";
+
+export function NodeMongoDB(node: MongoDBNode) {
+ const { id, selected } = node;
+ return (
+ <NodeRect id={id} selected={selected} type={node.type}>
+ <div style={{ padding: '10px 20px' }}>
+ {nodeLabel(node)}
+ <Handle
+ id="env_var"
+ type={"source"}
+ position={Position.Top}
+ isConnectableStart={true}
+ isConnectableEnd={true}
+ isConnectable={true}
+ />
+ </div>
+ </NodeRect>
+ );
+}
+
+export function NodeMongoDBDetails(node: MongoDBNode) {
+ return (
+ <>
+ <div>{nodeLabel(node)}</div>
+ </>);
+}
\ No newline at end of file