Upload components/Header.jsx with huggingface_hub

components/Header.jsx

@@ -1,16 +1,15 @@
 import React from 'react';
-import { Bell, Search, Menu, User } from 'lucide-react';
+import { Bell, Search, Menu } from 'lucide-react';
 
 export default function Header({ onMenuClick, onThemeToggle, isDark }) {
   return (
-    <header className="bg-white dark:bg-dark-surface shadow-sm border-b border-gray-200 dark:border-dark-border z-10">
+    <header className="bg-white dark:bg-dark-surface shadow-sm border-b border-gray-200 dark:border-dark-border z-10 sticky top-0">
       <div className="px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
-          {/* Left: Menu Button & Search */}
           <div className="flex items-center">
             <button
               type="button"
-              className="lg:hidden -ml-2 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
+              className="lg:hidden -ml-2 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500 dark:hover:bg-gray-800"
               onClick={onMenuClick}
             >
               <span className="sr-only">Open sidebar</span>
@@ -23,7 +22,7 @@ export default function Header({ onMenuClick, onThemeToggle, isDark }) {
                   <Search className="h-5 w-5 text-gray-400" />
                 </div>
                 <input
-                  className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-dark-bg dark:border-gray-600 dark:text-white dark:placeholder-gray-400"
+                  className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-gray-50 placeholder-gray-500 focus:outline-none focus:bg-white focus:placeholder-gray-400 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:bg-gray-900 transition-colors"
                   placeholder="Search projects, tasks, or team members..."
                   type="search"
                 />
@@ -31,55 +30,47 @@ export default function Header({ onMenuClick, onThemeToggle, isDark }) {
             </div>
           </div>
 
-          {/* Right: Actions & Profile */}
           <div className="flex items-center space-x-4">
-            {/* Anycoder Link */}
             <a 
               href="https://huggingface.co/spaces/akhaliq/anycoder" 
               target="_blank" 
               rel="noopener noreferrer"
-              className="hidden md:inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-primary-900 dark:text-primary-300 dark:hover:bg-primary-800 transition-colors"
+              className="hidden md:inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-semibold rounded-full text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-primary-900/50 dark:text-primary-300 dark:hover:bg-primary-900 transition-all hover:scale-105"
             >
               Built with anycoder
             </a>
 
-            {/* Theme Toggle (Visual Placeholder as actual toggle is in Sidebar or can be here) */}
             <button
               onClick={onThemeToggle}
-              className="p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:hover:text-gray-300 transition-colors"
+              className="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:hover:text-gray-300 dark:hover:bg-gray-800 transition-colors"
             >
               {isDark ? (
-                <span className="sr-only">Enable light mode</span>
+                 <span className="sr-only">Enable light mode</span>
               ) : (
-                <span className="sr-only">Enable dark mode</span>
+                 <span className="sr-only">Enable dark mode</span>
               )}
-              {/* Just a visual indicator that changes based on state, actual toggle handled here */}
-              <div className={`w-5 h-5 rounded-full ${isDark ? 'bg-yellow-400' : 'bg-gray-700'}`}></div>
+              <div className={`w-5 h-5 rounded-full shadow-inner ${isDark ? 'bg-yellow-400' : 'bg-indigo-900'}`}></div>
             </button>
 
-            {/* Notifications */}
-            <button className="p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none relative dark:hover:text-gray-300">
-              <span className="absolute top-1.5 right-1.5 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white dark:ring-dark-surface"></span>
+            <button className="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none relative dark:hover:text-gray-300 dark:hover:bg-gray-800 transition-colors">
+              <span className="absolute top-1.5 right-1.5 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white dark:ring-dark-surface animate-pulse"></span>
               <span className="sr-only">View notifications</span>
               <Bell className="h-6 w-6" />
             </button>
 
-            {/* Profile Dropdown */}
             <div className="relative ml-3">
-              <div>
-                <button
-                  type="button"
-                  className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-dark-surface"
-                  id="user-menu-button"
-                >
-                  <span className="sr-only">Open user menu</span>
-                  <img
-                    className="h-8 w-8 rounded-full object-cover"
-                    src="https://picsum.photos/seed/user1/200/200"
-                    alt=""
-                  />
-                </button>
-              </div>
+              <button
+                type="button"
+                className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-dark-surface ring-2 ring-transparent hover:ring-gray-200 dark:hover:ring-gray-600 transition-all"
+                id="user-menu-button"
+              >
+                <span className="sr-only">Open user menu</span>
+                <img
+                  className="h-8 w-8 rounded-full object-cover"
+                  src="https://picsum.photos/seed/user1/200/200"
+                  alt=""
+                />
+              </button>
             </div>
           </div>
         </div>