Spaces:
Build error
Build error
File size: 3,557 Bytes
008b715 | 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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 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>
)
} |