Spaces:
Build error
Build error
File size: 4,376 Bytes
ff2b7ce 6e38cb2 ff2b7ce 6e38cb2 ff2b7ce 6e38cb2 ff2b7ce 6e38cb2 ff2b7ce 6e38cb2 ff2b7ce 6e38cb2 ff2b7ce 6e38cb2 ff2b7ce 6e38cb2 ff2b7ce 6e38cb2 ff2b7ce 6e38cb2 ff2b7ce 6e38cb2 ff2b7ce |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import React from '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 sticky top-0">
<div className="px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<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 dark:hover:bg-gray-800"
onClick={onMenuClick}
>
<span className="sr-only">Open sidebar</span>
<Menu className="h-6 w-6" />
</button>
<div className="hidden lg:block ml-4 lg:ml-0">
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<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-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"
/>
</div>
</div>
</div>
<div className="flex items-center space-x-4">
<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-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>
<button
onClick={onThemeToggle}
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 dark mode</span>
)}
<div className={`w-5 h-5 rounded-full shadow-inner ${isDark ? 'bg-yellow-400' : 'bg-indigo-900'}`}></div>
</button>
<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>
<div className="relative ml-3">
<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>
</div>
</header>
);
} |