feat(client): add react-flow css and base if else node

2025-07-04 20:57:35 +05:00
parent e10430310f
commit 91c8efe13f
3 changed files with 102 additions and 6 deletions
--- a/client/src/components/nodes/IfElseNode.tsx
+++ b/client/src/components/nodes/IfElseNode.tsx
@@ -0,0 +1,87 @@
+import { Handle, NodeProps, Position, Node } from "@xyflow/react";
+
+type IfElseNodeData = {
+  condition?: string;
+};
+
+export default function IfElseNode({ data }: NodeProps<Node & IfElseNodeData>) {
+  return (
+    <div
+      style={{
+        border: "0px solid",
+        borderRadius: 8,
+        backgroundColor: "white",
+        width: "248px",
+        height: "144px",
+        fontFamily: "sans-serif",
+        position: "relative",
+        overflow: "hidden",
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        console.log("data", data);
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          padding: "8px 12px",
+          borderBottom: "1px solid #E2E2E2",
+          backgroundColor: "#fff",
+          height: "48px",
+          fontWeight: 600,
+          fontSize: 16,
+          gap: 8,
+        }}
+      >
+        <img src="./icons/node/ifElse.svg" /> ЕСЛИ - ТО
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: "12px",
+          borderBottom: "1px solid #E2E2E2",
+          fontSize: 14,
+          height: "48px",
+        }}
+      >
+        Если {data.condition as string}, то
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: "12px",
+          fontSize: 14,
+          height: "48px",
+        }}
+      >
+        Иначе
+      </div>
+
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{ background: "#555" }}
+        id="input"
+      />
+
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{ background: "#555" }}
+        id="true"
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={{ background: "#555" }}
+        id="false"
+      />
+    </div>
+  );
+}