From e8a9201d0d98237e95949d7b6c500caf2fd51ce1 Mon Sep 17 00:00:00 2001
From: Tieptk <tieptk@hurasoft.com>
Date: Mon, 30 Sep 2024 09:22:58 +0700
Subject: [PATCH] add

---
 src/nodes/custom/CustomNode.tsx | 83 +++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/nodes/custom/CustomNode.tsx

diff --git a/src/nodes/custom/CustomNode.tsx b/src/nodes/custom/CustomNode.tsx
new file mode 100644
index 0000000..1dca10d
--- /dev/null
+++ b/src/nodes/custom/CustomNode.tsx
@@ -0,0 +1,83 @@
+// CustomNode.tsx
+import React, { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+
+interface NodeProps {
+  data: {
+    label: string;
+  };
+  isConnectable: boolean;
+}
+
+const CustomNode: React.FC<NodeProps> = ({ data, isConnectable }) => {
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Top}
+        onConnect={(params) => console.log('handle onConnect', params)}
+        isConnectable={isConnectable}
+      />
+      <div
+        style={{
+          width: 275,
+          padding: 10,
+          border: '1px solid #1a192b',
+          background: '#fff',
+        }}
+      >
+        {data.label}
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="yes"
+        style={{ bottom: 0, left: 45, background: '#555' }}
+        isConnectable={isConnectable}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          left: 30,
+          bottom: -14,
+          background: '#000',
+          color: '#fff',
+          fontSize: 11,
+          paddingLeft: 5,
+          paddingRight: 5,
+          paddingTop: 3,
+          paddingBottom: 3,
+          borderRadius: 5,
+        }}
+      >
+        Yes
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="no"
+        style={{ bottom: 0, left: 240, background: '#555' }}
+        isConnectable={isConnectable}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          right: 25,
+          bottom: -10,
+          background: '#000',
+          color: '#fff',
+          paddingLeft: 5,
+          paddingRight: 5,
+          paddingTop: 3,
+          paddingBottom: 3,
+          fontSize: 11,
+          borderRadius: 5,
+        }}
+      >
+        No
+      </div>
+    </>
+  );
+};
+
+export default memo(CustomNode);