Upload components/PropertiesPanel.js with huggingface_hub

components/PropertiesPanel.js

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react'
+import { Settings, X } from 'lucide-react'
+
+export default function PropertiesPanel({ selectedNode, setNodes }) {
+  const [nodeData, setNodeData] = useState(null)
+
+  useEffect(() => {
+    if (selectedNode) {
+      setNodeData(selectedNode)
+    } else {
+      setNodeData(null)
+    }
+  }, [selectedNode])
+
+  const handlePropertyChange = (key, value) => {
+    if (!nodeData) return
+    const updatedNode = { ...nodeData, properties: { ...nodeData.properties, [key]: value } }
+    setNodeData(updatedNode)
+    setNodes(prev => prev.map(node => 
+      node.id === nodeData.id ? updatedNode : node
+    ))
+  }
+
+  if (!nodeData) {
+    return (
+      <div className="w-80 bg-white border-l border-gray-200 p-6" data-tutorial-target="properties-panel">
+        <div className="text-center py-12">
+          <Settings className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+          <h3 className="text-lg font-semibold text-gray-700 mb-2">No Node Selected</h3>
+          <p className="text-sm text-gray-500">Select a node to view its properties</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-80 bg-white border-l border-gray-200 p-6" data-tutorial-target="properties-panel">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-semibold text-gray-900">Node Properties</h2>
+        <button className="text-gray-400 hover:text-gray-600">
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Name
+          </label>
+          <input
+            type="text"
+            value={nodeData.properties.name}
+            onChange={(e) => handlePropertyChange('name', e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+          />
+        </div>
+
+        <div>