Upload components/Sidebar.jsx with huggingface_hub

components/Sidebar.jsx

@@ -0,0 +1,82 @@
+import { useState } from 'react'
+import { FiFile, FiFolder, FiChevronDown, FiChevronRight, FiPlus, FiSettings, FiSearch, FiGithub, FiTerminal, FiDebug, FiExtensions, FiUser, FiBook } from 'react-icons/fi'
+
+export default function Sidebar() {
+  const [expanded, setExpanded] = useState({
+    explorer: true,
+    search: false,
+    sourceControl: false,
+    run: false,
+    extensions: false
+  })
+
+  const toggleSection = (section) => {
+    setExpanded(prev => ({ ...prev, [section]: !prev[section] }))
+  }
+
+  return (
+    <div className="w-64 bg-sidebar text-gray-300 h-full flex flex-col">
+      <div className="p-3 border-b border-border">
+        <div className="flex items-center space-x-2 mb-4">
+          <FiFile className="text-blue-400" />
+          <span className="text-sm">Explorer</span>
+        </div>
+        <div className="space-y-1">
+          <button className="w-full text-left p-2 rounded hover:bg-panel transition-colors flex items-center space-x-2">
+            <FiFolder className="text-blue-400" />
+            <span className="text-sm">Open Folder</span>
+          </button>
+          <button className="w-full text-left p-2 rounded hover:bg-panel transition-colors flex items-center space-x-2">
+            <FiFile className="text-gray-400" />
+            <span className="text-sm">New File</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        <div className="p-2">
+          <div className="flex items-center justify-between p-1 hover:bg-panel rounded cursor-pointer" onClick={() => toggleSection('explorer')}>
+            <div className="flex items-center space-x-2">
+              <FiFolder className="text-blue-400" />
+              <span className="text-sm">PROJECTS</span>
+            </div>
+            {expanded.explorer ? <FiChevronDown /> : <FiChevronRight />}
+          </div>
+          {expanded.explorer && (
+            <div className="ml-4 mt-1 space-y-1">
+              <div className="flex items-center space-x-2 p-1 hover:bg-panel rounded">
+                <FiFolder className="text-yellow-400" />
+                <span className="text-sm">src</span>
+              </div>
+              <div className="flex items-center space-x-2 p-1 hover:bg-panel rounded">
+                <FiFile className="text-gray-400" />
+                <span className="text-sm">package.json</span>
+              </div>
+              <div className="flex items-center space-x-2 p-1 hover:bg-panel rounded">
+                <FiFile className="text-gray-400" />
+                <span className="text-sm">README.md</span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="p-2 border-t border-border">
+        <div className="space-y-2">
+          <button className="w-full text-left p-2 rounded hover:bg-panel transition-colors flex items-center space-x-2">
+            <FiSettings className="text-gray-400" />
+            <span className="text-sm">Settings</span>
+          </button>
+          <button className="w-full text-left p-2 rounded hover:bg-panel transition-colors flex items-center space-x-2">
+            <FiExtensions className="text-gray-400" />
+            <span className="text-sm">Extensions</span>
+          </button>
+          <button className="w-full text-left p-2 rounded hover:bg-panel transition-colors flex items-center space-x-2">
+            <FiBook className="text-gray-400" />
+            <span className="text-sm">Documentation</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}