refactor handles

src/components/graph/RenderingNode.tsx

@@ -1,5 +1,4 @@
 import { memo, useContext, useEffect, useMemo, useState } from 'react'
-import { Handle, Position } from 'reactflow'
 import yaml from 'js-yaml'
 import FlowContext from '../../lib/flowContext'
 import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from '../ui/empty'
@@ -11,6 +10,7 @@ import {
     BaseNodeHeaderTitle,
 } from './BaseNode'
 import { Rocket } from 'lucide-react'
+import { InputHandle, OutputHandle } from './NodeHandles'
 
 type Props = {
     id: string
@@ -178,8 +178,8 @@ export const RenderingNode = memo(function RenderingNode({ id }: Props) {
                 <div className="w-full text-xs text-muted-foreground">Parsed YAML output</div>
             </BaseNodeFooter>
 
-            <Handle type="target" position={Position.Left} id="ain" style={{ background: '#F97316', top: 20, width: 12, height: 12, borderRadius: 3 }} />
-            <Handle type="source" position={Position.Right} id="out" style={{ background: '#10B981', top: 20, width: 12, height: 12, borderRadius: 3 }} />
+            <InputHandle id="ain" />
+            <OutputHandle id="out" />
         </BaseNode>
     )
 })