Spaces:
Build error
Build error
| import { History, Settings, ChevronRight, Code, Layout, Sparkles } from 'lucide-react'; | |
| const menuItems = [ | |
| { icon: Sparkles, label: 'New Generation', active: true }, | |
| { icon: History, label: 'History', active: false }, | |
| { icon: Code, label: 'API Keys', active: false }, | |
| { icon: Layout, label: 'Templates', active: false }, | |
| { icon: Settings, label: 'Settings', active: false }, | |
| ]; | |
| export default function Sidebar() { | |
| return ( | |
| <div className="w-64 border-r border-gray-800/50 bg-black/20 hidden md:flex flex-col h-full fixed left-0 top-16 pt-4"> | |
| <div className="px-4 mb-6"> | |
| <button className="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-all shadow-lg shadow-indigo-500/20 flex items-center justify-center gap-2"> | |
| <Sparkles className="w-4 h-4" /> | |
| Start Generating | |
| </button> | |
| </div> | |
| <nav className="flex-1 px-2 space-y-1"> | |
| {menuItems.map((item, index) => ( | |
| <a | |
| key={index} | |
| href="#" | |
| className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${ | |
| item.active | |
| ? 'bg-gray-800/50 text-white border border-gray-700/50' | |
| : 'text-gray-400 hover:text-white hover:bg-gray-800/30' | |
| }`} | |
| > | |
| <item.icon className="w-4 h-4" /> | |
| {item.label} | |
| {item.active && <ChevronRight className="w-4 h-4 ml-auto opacity-50" />} | |
| </a> | |
| ))} | |
| </nav> | |
| <div className="p-4 border-t border-gray-800/50"> | |
| <div className="p-3 rounded-lg bg-gradient-to-br from-gray-900 to-black border border-gray-800"> | |
| <h4 className="text-xs font-semibold text-gray-300 mb-1">Storage Usage</h4> | |
| <div className="w-full bg-gray-800 rounded-full h-2 mt-2"> | |
| <div className="bg-indigo-500 h-2 rounded-full w-[45%]" /> | |
| </div> | |
| <p className="text-xs text-gray-500 mt-2">45% of 10GB used</p> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } |