Upload components/Sidebar.js with huggingface_hub

components/Sidebar.js

@@ -0,0 +1,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>
+  );
+}