54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Link, useLocation } from "react-router-dom";
|
|
|
|
interface Props {
|
|
username: string;
|
|
onLogout: () => void;
|
|
}
|
|
|
|
export function Navbar({ username, onLogout }: Props) {
|
|
const { pathname } = useLocation();
|
|
|
|
function navClass(path: string) {
|
|
const base =
|
|
"px-4 py-2 rounded-lg text-sm font-medium transition-colors";
|
|
return pathname === path
|
|
? `${base} bg-indigo-600 text-white`
|
|
: `${base} text-slate-300 hover:text-white hover:bg-slate-700`;
|
|
}
|
|
|
|
return (
|
|
<nav className="bg-slate-800 border-b border-slate-700 sticky top-0 z-10">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-14">
|
|
{/* Logo + nav links */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-indigo-400 font-bold text-lg mr-4 hidden sm:block">
|
|
Analytics
|
|
</span>
|
|
<Link to="/" className={navClass("/")}>
|
|
Dashboard
|
|
</Link>
|
|
<Link to="/events" className={navClass("/events")}>
|
|
Events
|
|
</Link>
|
|
</div>
|
|
|
|
{/* User info + logout */}
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-slate-400 text-sm hidden sm:block">
|
|
{username}
|
|
</span>
|
|
<button
|
|
onClick={onLogout}
|
|
className="text-sm font-medium text-slate-300 hover:text-white bg-slate-700 hover:bg-slate-600
|
|
px-3 py-1.5 rounded-lg transition-colors"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|