Upload components/EmailDetail.js with huggingface_hub

components/EmailDetail.js

@@ -0,0 +1,80 @@
+import { Reply, Forward, Trash2, Archive, MoreVertical, Star, User } from 'lucide-react';
+
+export default function EmailDetail({ email, onDelete }) {
+  return (
+    <div className="h-full flex flex-col">
+      {/* Toolbar */}
+      <div className="p-4 border-b border-slate-200 flex items-center justify-between shrink-0">
+        <div className="flex items-center gap-4">
+          <button className="p-2 hover:bg-slate-100 rounded-full text-slate-600">
+            <Archive size={18} />
+          </button>
+          <button 
+            onClick={onDelete}
+            className="p-2 hover:bg-red-50 rounded-full text-slate-600 hover:text-red-500 transition-colors"
+          >
+            <Trash2 size={18} />
+          </button>
+          <div className="w-px h-6 bg-slate-200 mx-1" />
+          <button className="p-2 hover:bg-slate-100 rounded-full text-slate-600">
+            <Star size={18} />
+          </button>
+        </div>
+        <div className="flex items-center gap-2">
+          <button className="p-2 hover:bg-slate-100 rounded-full text-slate-600">
+            <MoreVertical size={18} />
+          </button>
+        </div>
+      </div>
+
+      {/* Email Content */}
+      <div className="flex-1 p-8 overflow-y-auto">
+        <div className="max-w-3xl mx-auto">
+          <h1 className="text-2xl font-semibold text-slate-800 mb-8">{email.subject}</h1>
+          
+          <div className="flex items-center justify-between mb-8">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-600 font-bold">
+                <User size={20} />
+              </div>
+              <div>
+                <div className="font-medium text-slate-900">{email.sender}</div>
+                <div className="text-xs text-slate-500">to me <span className="mx-1">·</span> {email.date}</div>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <span className="px-2 py-1 bg-slate-100 text-slate-600 text-xs rounded font-medium">
+                {email.label}
+              </span>
+              <span className={`px-2 py-1 text-xs rounded font-medium ${
+                email.priority === 'high' ? 'bg-red-100 text-red-600' : 
+                email.priority === 'medium' ? 'bg-yellow-100 text-yellow-600' : 'bg-blue-100 text-blue-600'
+              }`}>
+                {email.priority} Priority
+              </span>
+            </div>
+          </div>
+
+          <div className="text-slate-700 leading-relaxed whitespace-pre-wrap mb-12">
+            {email.body}
+            <br /><br />
+            Best regards,<br />
+            The {email.sender} Team
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex gap-3">
+            <button className="flex items-center gap-2 px-6 py-2 border border-slate-300 rounded-full text-slate-600 hover:bg-slate-50 transition-colors font-medium">
+              <Reply size={16} />
+              Reply
+            </button>
+            <button className="flex items-center gap-2 px-6 py-2 border border-slate-300 rounded-full text-slate-600 hover:bg-slate-50 transition-colors font-medium">
+              <Forward size={16} />
+              Forward
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}