improve drag

src/components/graph/VariableNode.tsx

@@ -3,8 +3,9 @@ import FlowContext from '../../lib/flowContext'
 import {
     BaseNode,
     BaseNodeContent,
-    BaseNodeHeader,
-    BaseNodeHeaderTitle,
+    BaseNodeFooter,
+    BaseNodeFooterText,
+    BaseNodeHeaderRow,
 } from './BaseNode'
 import { Input } from '../ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
@@ -89,10 +90,7 @@ export const VariableNode = memo(function VariableNode({ id, data }: Props) {
 
     return (
         <BaseNode className="min-w-56 min-h-[180px]" handles={<OutputHandle id="out" />}>
-            <BaseNodeHeader className="border-b">
-                <Variable className="size-4" />
-                <BaseNodeHeaderTitle>{id}</BaseNodeHeaderTitle>
-            </BaseNodeHeader>
+            <BaseNodeHeaderRow icon={<Variable className="size-4" />} title={id} />
 
             <BaseNodeContent className="gap-2 p-3">
                 <div className="flex flex-col gap-1.5">
@@ -126,10 +124,13 @@ export const VariableNode = memo(function VariableNode({ id, data }: Props) {
                         />
                     )}
                 </div>
-                <p className="text-[10px] text-muted-foreground">
-                    Use in config: <code className="rounded bg-muted px-0.5">prop: $&#123;{id}&#125;</code>
-                </p>
             </BaseNodeContent>
+
+            <BaseNodeFooter>
+                <BaseNodeFooterText>
+                    Use in config: <code className="rounded bg-muted px-0.5">prop: {'${'}{id}{'}'}</code>
+                </BaseNodeFooterText>
+            </BaseNodeFooter>
         </BaseNode>
     )
 })