Output and timer node

components/FlowEditor/nodes/basic/OutputNode.tsx

@@ -0,0 +1,33 @@
+import styles from "./Node.module.css";
+import { Handle, Position } from "react-flow-renderer";
+
+type OutputNodeProps = {};
+
+const OutputNode = (props: OutputNodeProps) => {
+  return (
+    // Базовый класс generic-node - прописана ширина и положение, цвет текста и фона
+
+    // Nandle - ручка для коннекта. Можно задать оформление при помощи className, тип (target / source) и позицию
+
+    // Label - подпись ноды. Можно стилизовать
+
+    // Select - DropDown меню, можно стилизовать. Стоит класс nodrag для предотвращения залипания
+
+    <div className="output-node">
+      <Handle className="" type="target" position={Position.Top} />
+
+      <div className="generic-node-content">
+
+      <label htmlFor="select">Выбери своего покемона: </label>
+        <select className="nodrag">
+          <option>Включить</option>
+          <option>Выключить</option>
+        </select>
+      </div>
+
+      <Handle className="" type="source" position={Position.Bottom} />
+    </div>
+  );
+};
+
+export default OutputNode;

components/FlowEditor/nodes/basic/TimerNode.tsx

@@ -0,0 +1,31 @@
+import styles from "./Node.module.css";
+import { Handle, Position } from "react-flow-renderer";
+
+type TimerNodeProps = {};
+
+const TimerNode = (props: TimerNodeProps) => {
+  return (
+    // Базовый класс generic-node - прописана ширина и положение, цвет текста и фона
+
+    // Nandle - ручка для коннекта. Можно задать оформление при помощи className, тип (target / source) и позицию
+
+    // Label - подпись ноды. Можно стилизовать
+
+    // Select - DropDown меню, можно стилизовать. Стоит класс nodrag для предотвращения залипания
+
+    <div className="timer-node">
+      <Handle className="" type="target" position={Position.Top} />
+
+      <div className="generic-node-content">
+
+      <label htmlFor="select">Время задержки: </label>
+        <input> Время задержки</input>
+
+      </div>
+
+      <Handle className="" type="source" position={Position.Bottom} />
+    </div>
+  );
+};
+
+export default TimerNode;