init

components/nav.tsx

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