Spaces:
Build error
Build error
File size: 3,254 Bytes
1020173 | 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 | import { Inbox, Star, Clock, Send, File, Archive, Trash2, Tag } from 'lucide-react';
export default function Sidebar({ activeFilter, setActiveFilter }) {
const menuItems = [
{ id: 'All', icon: Inbox, label: 'Inbox', count: 12 },
{ id: 'Starred', icon: Star, label: 'Starred', count: 3 },
{ id: 'Snoozed', icon: Clock, label: 'Snoozed', count: 0 },
{ id: 'Sent', icon: Send, label: 'Sent', count: 150 },
{ id: 'Drafts', icon: File, label: 'Drafts', count: 2 },
];
const labels = [
{ id: 'Work', icon: Tag, color: 'bg-blue-500' },
{ id: 'Finance', icon: Tag, color: 'bg-green-500' },
{ id: 'Social', icon: Tag, color: 'bg-purple-500' },
{ id: 'Promotions', icon: Tag, color: 'bg-yellow-500' },
];
return (
<aside className="w-64 bg-slate-50 border-r border-slate-200 flex flex-col shrink-0">
<div className="p-4">
<button className="flex items-center gap-3 px-6 py-4 bg-white shadow-md hover:shadow-lg transition-shadow rounded-2xl text-slate-700 font-medium border border-slate-100">
<Plus size={20} className="text-gmail-blue" />
Compose
</button>
</div>
<nav className="flex-1 px-3 space-y-1 overflow-y-auto">
<div className="mb-4">
<p className="px-3 text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Mailbox</p>
{menuItems.map((item) => (
<button
key={item.id}
onClick={() => setActiveFilter(item.id)}
className={`w-full flex items-center justify-between px-3 py-2 rounded-r-full transition-colors text-sm ${
activeFilter === item.id
? 'bg-blue-100 text-blue-700 font-semibold'
: 'text-slate-600 hover:bg-slate-200'
}`}
>
<div className="flex items-center gap-3">
<item.icon size={18} />
<span>{item.label}</span>
</div>
{item.count > 0 && <span className="text-xs font-medium">{item.count}</span>}
</button>
))}
</div>
<div>
<p className="px-3 text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Labels</p>
{labels.map((label) => (
<button
key={label.id}
onClick={() => setActiveFilter(label.id)}
className={`w-full flex items-center gap-3 px-3 py-2 rounded-r-full transition-colors text-sm ${
activeFilter === label.id
? 'bg-blue-100 text-blue-700 font-semibold'
: 'text-slate-600 hover:bg-slate-200'
}`}
>
<label.icon size={18} className={label.color.replace('bg-', 'text-')} />
<span>{label.id}</span>
</button>
))}
</div>
</nav>
<div className="p-4 border-t border-slate-200">
<a
href="https://huggingface.co/spaces/akhaliq/anycoder"
target="_blank"
rel="noopener noreferrer"
className="block text-center text-xs text-slate-400 hover:text-gmail-blue transition-colors py-2"
>
Built with anycoder
</a>
</div>
</aside>
);
} |