File size: 4,039 Bytes
3c11192 f3726ae 3c11192 dd7dcdf 3c11192 f3726ae 3c11192 f3726ae 3c11192 dd7dcdf 3c11192 | 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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { Icon } from "./Icon";
type Props = {
/** Clears the session and returns to a fresh requisition (landing). */
onNewRequisition?: () => void;
};
export function Header({ onNewRequisition }: Props) {
return (
<header className="h-16 border-b border-outline-variant bg-surface z-50 shrink-0">
<div className="mx-auto flex h-full w-full max-w-6xl items-center justify-between px-gutter">
<div className="flex items-center gap-8">
<div className="flex flex-col">
<h1 className="font-headline-md text-xl font-bold text-primary leading-tight">
Procure
</h1>
<p className="text-[10px] uppercase tracking-wider text-secondary font-bold -mt-1">
AI Agent
</p>
</div>
<nav className="hidden md:flex items-center h-full">
<a
className="flex items-center gap-2 px-4 h-16 border-b-2 border-primary text-primary font-semibold transition-all"
href="#chat"
>
<span className="font-label-caps text-xs">AI Chat</span>
</a>
<a
className="flex items-center gap-2 px-4 h-16 border-b-2 border-transparent text-secondary hover:text-primary transition-all"
href="#requests"
>
<Icon name="assignment" className="text-xl" />
<span className="font-label-caps text-xs">Requests</span>
</a>
<a
className="flex items-center gap-2 px-4 h-16 border-b-2 border-transparent text-secondary hover:text-primary transition-all"
href="#dashboard"
>
<Icon name="dashboard" className="text-xl" />
<span className="font-label-caps text-xs">Dashboard</span>
</a>
<a
className="flex items-center gap-2 px-4 h-16 border-b-2 border-transparent text-secondary hover:text-primary transition-all"
href="#settings"
>
<Icon name="settings" className="text-xl" />
<span className="font-label-caps text-xs">Settings</span>
</a>
</nav>
</div>
<div className="flex items-center gap-6">
<div className="relative w-64 hidden lg:block">
<Icon
name="search"
className="absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm"
/>
<input
className="w-full pl-9 pr-4 py-1.5 bg-surface-container-low border border-outline-variant rounded-full focus:outline-none focus:border-primary text-body-sm"
placeholder="Search records..."
type="search"
aria-label="Search records"
/>
</div>
<button
type="button"
onClick={() => onNewRequisition?.()}
className="bg-primary text-on-primary px-4 py-1.5 rounded-full text-xs font-bold flex items-center gap-2 hover:opacity-90 transition-opacity"
>
<Icon name="add" className="text-sm" />
New Requisition
</button>
<div className="flex items-center gap-3 pl-4 border-l border-outline-variant">
<button
type="button"
className="text-secondary hover:text-primary transition-colors"
aria-label="Notifications"
>
<Icon name="notifications" />
</button>
<div className="w-8 h-8 rounded-full overflow-hidden border border-outline-variant">
<img
alt="User profile"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAB8IlU467es5NJk5X-KZ5aX33_ZJkLGC895NLoBOZaN8KZKwZZ4kehChNkwJqRDgUk4de9KdRpGG0-upWuOC20Uf7BU7O_T_Iu3Dtn9ORKohW57PyR0zFpC4WDe6mynmt3Ldl2U1XyvncN82W91Zqx3hPt1gxCs_LJINzsPfHfTW_apu_mST5BRuarVGGbv_F2b6uXeOgoPSsHSbiuvssQt3D_oPLxUPYFhfpO-RjqJxl-g4thcHTG0NMflquQxR5QLcnLR0X9UYwR"
width={32}
height={32}
className="w-full h-full object-cover"
/>
</div>
</div>
</div>
</div>
</header>
);
}
|