47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
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 },
|
|
];
|
|
|
|
export function Nav() {
|
|
return (
|
|
<header className="border-b border-muted/40 bg-surface">
|
|
<div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3 sm:px-6">
|
|
<Link href="/" className="flex items-center gap-3 text-lg font-bold text-fg">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src="/logo.svg"
|
|
alt=""
|
|
width={72}
|
|
height={72}
|
|
className="-mt-1 -mb-6 h-[72px] w-[72px] rounded-2xl shadow-lg ring-2 ring-surface"
|
|
/>
|
|
<span className="hidden text-xs font-normal tracking-wide text-fg/50 sm:block">
|
|
<span className="font-semibold text-accent">K</span>siążka{" "}
|
|
<span className="font-semibold text-accent">N</span>otowań{" "}
|
|
<span className="font-semibold text-accent">U</span>dźwigów i{" "}
|
|
<span className="font-semibold text-accent">R</span>ezultatów
|
|
</span>
|
|
</Link>
|
|
<nav className="flex items-center gap-1 sm:gap-2">
|
|
{links.map(({ href, label, icon: Icon }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium text-fg/80 transition-colors hover:bg-bg hover:text-accent sm:px-3"
|
|
>
|
|
<Icon size={16} />
|
|
<span className="hidden sm:inline">{label}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|