File size: 3,733 Bytes
342595c | 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 | export default function Header({
dbStatus,
chunksCount,
docsCount,
isMuted,
onToggleMute,
onToggleDrawer,
onOpenUpload,
onOpenSettings,
}) {
return (
<header className="bg-surface/90 backdrop-blur-md border-b border-outline-variant px-4 md:px-8 py-3 shrink-0 z-40 relative">
<div className="absolute inset-0 meander-pattern opacity-50 z-[-1]" />
<div className="flex justify-between items-center w-full max-w-6xl mx-auto">
{/* Left: Drawer Toggle & Brand Title */}
<div className="flex items-center gap-3">
<button
onClick={onToggleDrawer}
aria-label="Toggle Document Drawer"
className="text-primary hover:text-primary-fixed-dim transition-colors p-2 rounded-full hover:bg-surface-variant flex items-center justify-center cursor-pointer"
>
<span className="material-symbols-outlined text-2xl">Menu</span>
</button>
<div className="flex flex-col">
<h1 className="font-['Bodoni_Moda'] text-xl md:text-2xl uppercase tracking-widest text-primary font-semibold">
Bank OF Libreo
</h1>
<p className="text-[11px] text-on-surface-variant flex items-center gap-1.5 font-['Source_Serif_4']">
<span className="w-2 h-2 rounded-full bg-emerald-600 inline-block animate-pulse" />
<span>{dbStatus}</span>
</p>
</div>
</div>
{/* Right: Knowledge Base Pills & Actions */}
<div className="flex items-center gap-2.5">
{/* Sound Toggle Button */}
<button
onClick={onToggleMute}
aria-label={isMuted ? "Unmute sound effects" : "Mute sound effects"}
title={isMuted ? "Sound Disabled" : "Sound Enabled"}
className="text-primary hover:text-primary-fixed-dim p-2 rounded-full hover:bg-surface-variant flex items-center justify-center transition-colors cursor-pointer"
>
<span className="material-symbols-outlined text-xl">
{isMuted ? "volume_off" : "volume_up"}
</span>
</button>
{/* Settings Button */}
<button
onClick={onOpenSettings}
aria-label="Open settings"
title="Settings"
className="text-primary hover:text-primary-fixed-dim p-2 rounded-full hover:bg-surface-variant flex items-center justify-center transition-colors cursor-pointer"
>
<span className="material-symbols-outlined text-xl">settings</span>
</button>
{/* Stats Button */}
<button
onClick={onToggleDrawer}
className="bg-surface-container/80 hover:bg-surface-variant text-primary border border-outline-variant/60 text-xs font-semibold px-3 py-1.5 rounded-full transition-all flex items-center gap-1.5 shadow-sm cursor-pointer"
>
<span className="material-symbols-outlined text-base">database</span>
<span>{chunksCount} Chunks</span>
<span className="text-primary/40">•</span>
<span>{docsCount} Docs</span>
</button>
{/* Upload Button */}
<button
onClick={onOpenUpload}
className="bg-primary text-on-primary hover:bg-primary-container hover:text-on-primary-container text-xs font-semibold px-4 py-2 rounded-lg transition-all flex items-center gap-1.5 shadow-sm cursor-pointer"
>
<span className="material-symbols-outlined text-base">
cloud_upload
</span>
<span className="hidden sm:inline">Upload Data</span>
</button>
</div>
</div>
</header>
);
}
|