Spaces:
Running
Running
File size: 3,870 Bytes
b1c84b5 c78c2c1 b1c84b5 b1a8265 41972d7 376fe09 b1a8265 c78c2c1 b1a8265 b1c84b5 b1a8265 b1c84b5 b1a8265 b1c84b5 b1a8265 b1c84b5 b1a8265 | 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 | import { NavLink, Link } from 'react-router-dom'
import { Radar, Clock, TrendingUp, ShieldCheck, Home, BarChart2 } from 'lucide-react'
import { PAGE_STYLE } from '../App.jsx'
const NAV_LINKS = [
{ to: '/', icon: Home, label: 'Home' },
{ to: '/verify', icon: ShieldCheck, label: 'Verify' },
{ to: '/history', icon: Clock, label: 'History' },
{ to: '/trends', icon: TrendingUp, label: 'Trends' },
{ to: '/benchmarks', icon: BarChart2, label: 'Benchmarks' },
]
export default function Navbar() {
return (
<header
role="banner"
style={{ background: 'var(--bg-surface)', borderBottom: '1px solid var(--border)' }}
className="sticky top-0 z-50 h-14"
>
{/* Inner content aligned to same width as page content */}
<div style={{
...PAGE_STYLE,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
height: '100%',
}}>
{/* Logo — Link to home */}
<Link
to="/"
className="flex items-center gap-2"
aria-label="PhilVerify home"
style={{ textDecoration: 'none' }}
>
<Radar size={18} style={{ color: 'var(--accent-red)' }} aria-hidden="true" />
<span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.05em', color: 'var(--text-primary)' }}>
PHIL<span style={{ color: 'var(--accent-red)' }}>VERIFY</span>
</span>
</Link>
{/* Nav */}
<nav aria-label="Main navigation">
<ul className="flex items-center gap-2" role="list">
{NAV_LINKS.map(({ to, icon: Icon, label }) => (
<li key={to}>
<NavLink to={to} end={to === '/'} className="nav-link-item">
{({ isActive }) => (
<div
className="flex items-center gap-2 px-4 py-2 text-xs font-semibold transition-colors"
style={{
fontFamily: 'var(--font-display)',
letterSpacing: '0.08em',
color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
borderBottom: isActive ? '2px solid var(--accent-red)' : '2px solid transparent',
minHeight: 44,
display: 'flex',
alignItems: 'center',
}}
>
<Icon size={13} aria-hidden="true" />
{label}
</div>
)}
</NavLink>
</li>
))}
</ul>
</nav>
{/* Live indicator */}
<div className="flex items-center gap-1.5 text-xs tabular"
style={{ color: 'var(--text-muted)' }}
aria-label="API status: live">
<span className="w-1.5 h-1.5 rounded-full" aria-hidden="true"
style={{ background: 'var(--accent-green)' }} />
LIVE
</div>
</div>
</header>
)
}
|