Working on dialog editor, on dialogs, on phone

dialogEditor/src/components/nodes/EndNode.tsx

@@ -0,0 +1,20 @@
+import { memo } from 'react';
+import { Handle, Position, NodeProps } from '@xyflow/react';
+import { EndNode as EndNodeData } from '../../types/dialogue';
+import styles from './nodes.module.css';
+
+export const EndNode = memo(({ data, selected }: NodeProps & { data: EndNodeData }) => {
+  return (
+    <div
+      className={[
+        styles.node,
+        styles.endNode,
+        selected ? styles.selected : '',
+      ].join(' ')}
+    >
+      <Handle type="target" position={Position.Top} id="target" className={styles.handle} />
+      <div className={styles.endLabel}>END</div>
+      <div className={styles.nodeId}>{data.id}</div>
+    </div>
+  );
+});