init

components/nav-links.tsx

@@ -0,0 +1,43 @@
+"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>
+        );
+      })}
+    </>
+  );
+}