Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 3x 28x 28x 1x | import { Search, Bell } from 'lucide-react';
import { Input } from '@/components/input';
import { Badge } from '@/components/badge';
import { ThemeToggle } from '@/components/theme-toggle';
import { UserProfile } from '@/components/user-profile';
import { useNotifications } from '@/hooks/use-store-sync';
import logoImage from '@/assets/images/logo/logo.webp';
export const Header = () => {
const { counts, isOpen, setOpen } = useNotifications();
return (
<header className="flex items-center px-[65px] h-[83px] bg-background border-b border-border">
<div className="flex flex-grow items-center">
<img
src={logoImage}
className="h-[21px] w-[104px]"
alt="CoinBase Logo"
/>
</div>
{/* Search Bar */}
<div className="flex pl-[52px]">
{/* Gradient border wrapper */}
<div className="rounded-full bg-gradient-vertical p-[2px] w-[422px] h-[40px]">
<div className="relative rounded-full bg-background h-full w-full">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4 z-10" />
<Input
placeholder="Search e.g card"
className="w-[418px] h-[36px] border-0 rounded-full bg-transparent pl-10 text-foreground placeholder:text-muted-foreground"
/>
</div>
</div>
</div>
{/* Right side - Navigation and Profile */}
<div className="flex items-center space-x-4">
{/* Theme Toggle */}
<ThemeToggle />
<UserProfile />
{/* Notifications */}
<button
type="button"
className="relative cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
onClick={() => setOpen(!isOpen)}
aria-label={`Notifications${counts.unread > 0 ? ` (${counts.unread} unread)` : ''}`}
>
<Bell className="h-[20px] text-foreground" />
{counts.unread > 0 && (
<Badge className="absolute -top-[10px] -right-[6px] w-[14px] h-[14px] bg-gradient-vertical px-[unset] py-[unset] flex items-center justify-center">
{counts.unread > 9 ? '9+' : counts.unread}
</Badge>
)}
</button>
</div>
</header>
);
};
|