refactor context menu to separate component

src/components/NodeContextMenu.tsx

@@ -0,0 +1,66 @@
+import { Dropdown, type MenuProps } from "antd";
+import { useState } from "react";
+
+const items: MenuProps['items'] = [
+  {
+    key: 'rename',
+    label: 'Rename',
+    extra: 'ctrl + n',
+  },
+  {
+    key: 'subgraph',
+    label: 'Subgraph',
+    extra: 'ctrl + s',
+  },
+  {
+    key: 'remove',
+    label: 'Remove',
+    extra: 'ctrl + r'
+  }
+]
+
+export default function NodeContextMenu({ 
+    coords, 
+    openContextMenu, 
+    contextMenuOpened } : 
+    { 
+      coords: {x:number, y:number}, 
+      openContextMenu: React.Dispatch<React.SetStateAction<boolean>>, 
+      contextMenuOpened: boolean
+    }) {    
+  function contextMenuOpenChange(open: boolean) {
+    if (!open) {
+      openContextMenu(false)
+    }
+  }
+
+  const onMenuClick: MenuProps['onClick'] = ({ key }) => {
+      switch (key) {
+        case 'rename': {
+          //openRenameModal(true);
+          break;
+        }
+        case 'remove': {
+          //removeNode(nodeId);
+          break;
+        }
+        case 'subgraph': {
+          
+  
+          break;
+        }
+      }
+    };
+
+  return (
+    <Dropdown menu={{ items, onClick: onMenuClick }} trigger={['contextMenu']} open={contextMenuOpened} onOpenChange={contextMenuOpenChange} getPopupContainer={() => document.body}
+      // 👇 Key part: manually position the dropdown
+      overlayStyle={{
+        position: "absolute",
+        left: coords.x,
+        top: coords.y,
+      }}>
+
+    </Dropdown>
+  )
+}