improve vars

src/components/graph/VariableNode.tsx

@@ -6,6 +6,9 @@ import {
     BaseNodeHeader,
     BaseNodeHeaderTitle,
 } from './BaseNode'
+import { Input } from '../ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Switch } from '../ui/switch'
 import { OutputHandle } from './NodeHandles'
 import { Variable } from 'lucide-react'
 
@@ -59,24 +62,31 @@ export const VariableNode = memo(function VariableNode({ id, data }: Props) {
     )
 
     const onTypeChange = useCallback(
-        (e: React.ChangeEvent<HTMLSelectElement>) => {
-            const nextType = e.target.value as ValueType
+        (nextType: string) => {
+            const type = nextType as ValueType
             const raw = typeof value === 'boolean' ? (value ? 'true' : 'false') : String(value)
-            const nextValue = coerceValue(raw, nextType)
-            updateData({ valueType: nextType, value: nextValue })
+            const nextValue = coerceValue(raw, type)
+            updateData({ valueType: type, value: nextValue })
         },
         [value, updateData]
     )
 
     const onValueChange = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
-            const raw = e.target.type === 'checkbox' ? (e.target.checked ? 'true' : 'false') : e.target.value
+            const raw = e.target.value
             const nextValue = coerceValue(raw, valueType)
             updateData({ value: nextValue })
         },
         [valueType, updateData]
     )
 
+    const onBooleanChange = useCallback(
+        (checked: boolean) => {
+            updateData({ value: checked })
+        },
+        [updateData]
+    )
+
     return (
         <BaseNode className="w-56">
             <BaseNodeHeader className="border-b">
@@ -84,37 +94,35 @@ export const VariableNode = memo(function VariableNode({ id, data }: Props) {
                 <BaseNodeHeaderTitle>{id}</BaseNodeHeaderTitle>
             </BaseNodeHeader>
 
-            <BaseNodeContent className="gap-2">
+            <BaseNodeContent className="gap-2 p-3">
                 <div className="flex flex-col gap-1.5">
                     <label className="text-xs font-medium text-muted-foreground">Type</label>
-                    <select
-                        value={valueType}
-                        onChange={onTypeChange}
-                        className="w-full rounded border border-input bg-background px-2 py-1.5 text-sm"
-                    >
-                        <option value="string">String</option>
-                        <option value="number">Number</option>
-                        <option value="boolean">Boolean</option>
-                    </select>
+                    <Select value={valueType} onValueChange={onTypeChange}>
+                        <SelectTrigger>
+                            <SelectValue placeholder="Type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="string">String</SelectItem>
+                            <SelectItem value="number">Number</SelectItem>
+                            <SelectItem value="boolean">Boolean</SelectItem>
+                        </SelectContent>
+                    </Select>
                 </div>
                 <div className="flex flex-col gap-1.5">
                     <label className="text-xs font-medium text-muted-foreground">Value</label>
                     {valueType === 'boolean' ? (
-                        <label className="flex items-center gap-2 text-sm">
-                            <input
-                                type="checkbox"
+                        <div className="flex items-center gap-2 text-sm">
+                            <Switch
                                 checked={value === true}
-                                onChange={onValueChange}
-                                className="rounded border-input"
+                                onCheckedChange={onBooleanChange}
                             />
-                            {value ? 'true' : 'false'}
-                        </label>
+                            <span className="text-muted-foreground">{value ? 'true' : 'false'}</span>
+                        </div>
                     ) : (
-                        <input
+                        <Input
                             type={valueType === 'number' ? 'number' : 'text'}
                             value={valueType === 'number' ? (value as number) : displayValue}
                             onChange={onValueChange}
-                            className="w-full rounded border border-input bg-background px-2 py-1.5 text-sm"
                         />
                     )}
                 </div>