44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Activity, Dumbbell, LayoutDashboard, Settings } from "lucide-react";
|
|
|
|
const links = [
|
|
{ href: "/", label: "Panel", icon: LayoutDashboard },
|
|
{ href: "/running", label: "Bieganie", icon: Activity },
|
|
{ href: "/strength", label: "Siłownia", icon: Dumbbell },
|
|
{ href: "/settings", label: "Ustawienia", icon: Settings },
|
|
];
|
|
|
|
function isActive(pathname: string, href: string) {
|
|
return href === "/" ? pathname === "/" : pathname.startsWith(href);
|
|
}
|
|
|
|
export function NavLinks() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<>
|
|
{links.map(({ href, label, icon: Icon }) => {
|
|
const active = isActive(pathname, href);
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
aria-current={active ? "page" : undefined}
|
|
className={`flex items-center gap-1.5 rounded-full px-2.5 py-1.5 text-sm font-medium transition-colors sm:px-3.5 ${
|
|
active
|
|
? "bg-accent/15 text-accent"
|
|
: "text-fg/70 hover:bg-white/5 hover:text-fg"
|
|
}`}
|
|
>
|
|
<Icon size={16} />
|
|
<span className="hidden sm:inline">{label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|