Spaces:
Build error
Build error
File size: 2,071 Bytes
51efbca | 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 | 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>
);
} |