File size: 2,719 Bytes
e1ef9fc | 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 | 'use client';
import { Bell, Search, ChevronDown } from 'lucide-react';
import { getInitials } from '@/lib/utils';
import { demoUser, demoRestaurant } from '@/lib/demo-data';
export function DashboardHeader() {
return (
<header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-zinc-200/60 bg-white/80 px-4 backdrop-blur-xl sm:px-6 dark:border-zinc-800 dark:bg-zinc-950/80">
{/* Search */}
<div className="flex items-center gap-3">
<div className="relative hidden sm:block">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
<input
type="text"
placeholder="Search menus, orders, products..."
className="h-9 w-72 rounded-xl border border-zinc-200 bg-zinc-50 pl-9 pr-4 text-sm placeholder:text-zinc-400 focus:border-emerald-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all dark:border-zinc-700 dark:bg-zinc-900"
/>
<kbd className="absolute right-3 top-1/2 -translate-y-1/2 hidden rounded-md border border-zinc-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-zinc-400 sm:inline-block dark:border-zinc-700 dark:bg-zinc-800">
⌘K
</kbd>
</div>
</div>
{/* Right side */}
<div className="flex items-center gap-2">
{/* Restaurant switcher */}
<button className="hidden items-center gap-2 rounded-xl border border-zinc-200 px-3 py-2 text-sm font-medium text-zinc-700 transition-all hover:bg-zinc-50 sm:flex dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800">
<div className="h-5 w-5 rounded-md bg-gradient-to-br from-emerald-500 to-cyan-500" />
<span className="max-w-[120px] truncate">{demoRestaurant.name}</span>
<ChevronDown className="h-3.5 w-3.5 text-zinc-400" />
</button>
{/* Notifications */}
<button className="relative rounded-xl p-2.5 text-zinc-500 transition-all hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800">
<Bell className="h-[18px] w-[18px]" />
<span className="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-emerald-500 ring-2 ring-white dark:ring-zinc-950" />
</button>
{/* Avatar */}
<button className="flex items-center gap-2 rounded-xl p-1.5 transition-all hover:bg-zinc-100 dark:hover:bg-zinc-800">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-fuchsia-500 text-xs font-bold text-white shadow-sm">
{getInitials(demoUser.full_name)}
</div>
</button>
</div>
</header>
);
}
|