File size: 2,009 Bytes
43b3639 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 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> |