refactor handles

src/components/graph/NodeHandles.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Handle, Position } from 'reactflow'
+import { Circle, CircleDashed } from 'lucide-react'
+
+type NodeHandleProps = {
+    id: string
+}
+
+export function InputHandle({ id }: NodeHandleProps) {
+    return (
+        <Handle
+            type="target"
+            position={Position.Left}
+            id={id}
+            style={{
+                top: 20,
+                width: 20,
+                height: 20,
+                left: -10,
+                borderRadius: '9999px',
+                background: 'transparent',
+                border: 'none',
+                padding: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            <CircleDashed className="w-4 h-4 text-gray-500 pointer-events-none" />
+        </Handle>
+    )
+}
+
+export function OutputHandle({ id }: NodeHandleProps) {
+    return (
+        <Handle
+            type="source"
+            position={Position.Right}
+            id={id}
+            style={{
+                top: 20,
+                width: 20,
+                height: 20,
+                right: -10,
+                borderRadius: '9999px',
+                background: 'transparent',
+                border: 'none',
+                padding: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            <Circle className="w-4 h-4 text-gray-800 pointer-events-none" />
+        </Handle>
+    )
+}
+