Upload components/Toolbar.js with huggingface_hub

components/Toolbar.js

@@ -0,0 +1,90 @@
+import { useState } from 'react'
+import { Layers, Database, Activity, Filter, Settings, ChevronDown } from 'lucide-react'
+
+const toolbarItems = [
+  {
+    category: 'Input',
+    icon: Database,
+    color: 'text-blue-600',
+    items: ['Input Layer', 'Embedding', 'Data Augmentation']
+  },
+  {
+    category: 'Core',
+    icon: Layers,
+    color: 'text-purple-600',
+    items: ['Dense', 'Convolution', 'Recurrent', 'Transformer']
+  },
+  {
+    category: 'Activation',
+    icon: Activity,
+    color: 'text-green-600',
+    items: ['ReLU', 'Sigmoid', 'Tanh', 'Softmax']
+  },
+  {
+    category: 'Regularization',
+    icon: Filter,
+    color: 'text-orange-600',
+    items: ['Dropout', 'Batch Norm', 'Layer Norm']
+  },
+  {
+    category: 'Output',
+    icon: Settings,
+    color: 'text-red-600',
+    items: ['Output Layer', 'Loss Function', 'Metric']
+  }
+]
+
+export default function Toolbar() {
+  const [expandedCategory, setExpandedCategory] = useState(null)
+
+  const handleDragStart = (e, itemType) => {
+    e.dataTransfer.setData('node-type', itemType)
+  }
+
+  return (
+    <div className="w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto" data-tutorial-target="toolbar">
+      <h2 className="text-lg font-semibold text-gray-900 mb-4">Layers & Nodes</h2>
+      <div className="space-y-2">
+        {toolbarItems.map((category) => {
+          const Icon = category.icon
+          const isExpanded = expandedCategory === category.category
+          
+          return (
+            <div key={category.category} className="border border-gray-200 rounded-lg overflow-hidden">
+              <button
+                onClick={() => setExpandedCategory(isExpanded ? null : category.category)}
+                className="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50 transition-colors"
+              >
+                <div className="flex items-center space-x-3">
+                  <Icon className={`w-5 h-5 ${category.color}`} />
+                  <span className="font-medium text-gray-900">{category.category}</span>
+                </div>
+                <ChevronDown className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
+              </button>
+              
+              {isExpanded && (
+                <div className="bg-gray-50 p-2 space-y-1">
+                  {category.items.map((item) => (
+                    <div
+                      key={item}
+                      draggable
+                      onDragStart={(e) => handleDragStart(e, item)}
+                      className="px-4 py-2 text-sm text-gray-700 hover:bg-white rounded-lg cursor-move transition-colors border border-transparent hover:border-gray-300"
+                    >
+                      {item}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+      
+      <div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
+        <h3 className="font-semibold text-blue-900 mb-2">Quick Tip</h3>
+        <p className="text-sm text-blue-800">Drag any layer onto the canvas to start building your architecture!</p>
+      </div>
+    </div>
+  )
+}