File size: 2,470 Bytes
e249c2c af42cdd e249c2c af42cdd e249c2c | 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 | import React from "react";
import { NavLink, Link } from "react-router-dom";
import { ScanFace, UserPlus, LayoutDashboard, House, BookOpen } from "lucide-react";
export default function Header() {
const linkCls = ({ isActive }) =>
`px-3 py-2 text-sm font-semibold rounded-md transition-all duration-150 ${
isActive
? "text-cyan_glow bg-cyan_glow/10 border border-cyan_glow/30"
: "text-white/70 hover:text-white hover:bg-white/5"
}`;
return (
<header className="sticky top-0 z-40 glass border-b border-white/10">
<div className="max-w-[1400px] mx-auto px-6 py-3 flex items-center justify-between">
<Link to="/" className="flex items-center gap-3" data-testid="brand-link">
<div
className="w-9 h-9 rounded-md flex items-center justify-center"
style={{
background:
"linear-gradient(45deg, #8A2BE2 0%, #0057FF 50%, #00F0FF 100%)",
boxShadow: "0 0 20px rgba(0, 240, 255, 0.35)",
}}
>
<ScanFace size={20} className="text-black" />
</div>
<div className="leading-tight">
<div className="font-display font-extrabold text-lg tracking-tight">
FaceGuard
</div>
<div className="tag-eyebrow -mt-0.5">BIOMETRIC ATTENDANCE</div>
</div>
</Link>
<nav className="flex items-center gap-1">
<NavLink to="/" end className={linkCls} data-testid="nav-home">
<span className="inline-flex items-center gap-2"><House size={14} /> Beranda</span>
</NavLink>
<NavLink to="/register" className={linkCls} data-testid="nav-register">
<span className="inline-flex items-center gap-2"><UserPlus size={14} /> Daftar</span>
</NavLink>
<NavLink to="/attendance" className={linkCls} data-testid="nav-attendance">
<span className="inline-flex items-center gap-2"><ScanFace size={14} /> Absen</span>
</NavLink>
<NavLink to="/admin" className={linkCls} data-testid="nav-admin">
<span className="inline-flex items-center gap-2"><LayoutDashboard size={14} /> Dasbor</span>
</NavLink>
<NavLink to="/docs" className={linkCls} data-testid="nav-docs">
<span className="inline-flex items-center gap-2"><BookOpen size={14} /> Docs</span>
</NavLink>
</nav>
</div>
</header>
);
}
|