Upload components/Header.js with huggingface_hub

components/Header.js

@@ -1,25 +1,48 @@
-import { ExternalLink } from 'lucide-react';
+import { Search, Menu, Settings, HelpCircle, Grid, Plus } from 'lucide-react';
 
-export default function Header() {
+export default function Header({ searchQuery, setSearchQuery }) {
   return (
-    <header className="border-b border-slate-800 bg-slate-900/50 backdrop-blur-sm sticky top-0 z-50">
-      <div className="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
+    <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 shrink-0">
+      <div className="flex items-center gap-4">
+        <button className="p-2 hover:bg-slate-100 rounded-full text-slate-600">
+          <Menu size={20} />
+        </button>
         <div className="flex items-center gap-2">
-          <div className="bg-blue-600 p-2 rounded-lg">
-            <Database size={20} className="text-white" />
+          <div className="bg-gmail-red p-1.5 rounded-lg">
+            <div className="w-4 h-4 bg-white rounded-sm rotate-45" />
           </div>
-          <span className="text-xl font-bold text-white tracking-tight">Perplexity<span className="text-blue-500">Export</span></span>
+          <span className="text-xl font-semibold text-slate-700 tracking-tight">Gmail<span className="font-normal text-slate-400">Manager</span></span>
+        </div>
+      </div>
+
+      <div className="flex-1 max-w-2xl mx-8">
+        <div className="relative group">
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <Search size={18} className="text-slate-400 group-focus-within:text-gmail-blue transition-colors" />
+          </div>
+          <input 
+            type="text" 
+            placeholder="Search mail..." 
+            className="w-full pl-10 pr-4 py-2 bg-slate-100 border-transparent focus:bg-white focus:ring-2 focus:ring-gmail-blue focus:border-transparent rounded-lg transition-all outline-none text-slate-700"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button className="p-2 hover:bg-slate-100 rounded-full text-slate-600 hidden md:block">
+          <HelpCircle size={20} />
+        </button>
+        <button className="p-2 hover:bg-slate-100 rounded-full text-slate-600 hidden md:block">
+          <Settings size={20} />
+        </button>
+        <button className="p-2 hover:bg-slate-100 rounded-full text-slate-600 hidden md:block">
+          <Grid size={20} />
+        </button>
+        <div className="ml-2 w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white text-xs font-bold border-2 border-white shadow-sm">
+          JD
         </div>
-        
-        <a 
-          href="https://huggingface.co/spaces/akhaliq/anycoder" 
-          target="_blank" 
-          rel="noopener noreferrer"
-          className="text-sm text-slate-400 hover:text-white transition-colors flex items-center gap-1 bg-slate-800 px-3 py-1.5 rounded-full border border-slate-700 hover:border-slate-500"
-        >
-          Built with anycoder
-          <ExternalLink size={14} />
-        </a>
       </div>
     </header>
   );