Upload components/EmailList.js with huggingface_hub

components/EmailList.js

@@ -0,0 +1,58 @@
+import { Star, Archive, Trash2, Mail } from 'lucide-react';
+
+export default function EmailList({ emails, selectedId, setSelectedId }) {
+  return (
+    <div className="w-full max-w-md bg-white border-r border-slate-200 flex flex-col shrink-0">
+      <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+        <h2 className="font-semibold text-slate-700">Messages</h2>
+        <div className="flex gap-1">
+          <button className="p-1.5 hover:bg-slate-100 rounded text-slate-500">
+            <Mail size={16} />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        {emails.length === 0 ? (
+          <div className="p-8 text-center text-slate-400 text-sm">
+            No messages found matching your search.
+          </div>
+        ) : (
+          emails.map((email) => (
+            <div 
+              key={email.id}
+              onClick={() => setSelectedId(email.id)}
+              className={`group relative p-4 border-b border-slate-100 cursor-pointer transition-all ${
+                selectedId === email.id 
+                ? 'bg-blue-50 border-l-4 border-l-gmail-blue' 
+                : 'hover:bg-slate-50 border-l-4 border-l-transparent'
+              } ${!email.read ? 'bg-white font-bold' : 'bg-slate-50/30 font-normal'}`}
+            >
+              <div className="flex justify-between items-start mb-1">
+                <span className={`text-sm ${!email.read ? 'text-slate-900' : 'text-slate-600'}`}>
+                  {email.sender}
+                </span>
+                <span className="text-xs text-slate-400">{email.date}</span>
+              </div>
+              <div className={`text-sm truncate mb-1 ${!email.read ? 'text-slate-900' : 'text-slate-600'}`}>
+                {email.subject}
+              </div>
+              <div className="text-xs text-slate-400 truncate">
+                {email.body}
+              </div>
+              
+              <div className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 flex gap-1 transition-opacity">
+                <button className="p-1.5 hover:bg-slate-200 rounded-full text-slate-500">
+                  <Archive size={14} />
+                </button>
+                <button className="p-1.5 hover:bg-slate-200 rounded-full text-slate-500">
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}