Add active nav links

src/components/NavLinks.tsx

@@ -0,0 +1,52 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import LogoutButton from "./LogoutButton";
+
+export default function NavLinks({
+  user,
+}: {
+  user: { username: string; isAdmin: boolean } | null;
+}) {
+  const pathname = usePathname() || "/";
+
+  const isActive = (href: string) =>
+    href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(href + "/");
+
+  const cls = (href: string, extra = "") => {
+    const parts = [extra, isActive(href) ? "active" : ""].filter(Boolean);
+    return parts.join(" ") || undefined;
+  };
+  const current = (href: string) => (isActive(href) ? "page" : undefined);
+
+  return (
+    <div className="nav-links">
+      <Link href="/learn" className={cls("/learn")} aria-current={current("/learn")}>
+        Learn
+      </Link>
+      {user ? (
+        <>
+          {user.isAdmin && (
+            <Link href="/admin" className={cls("/admin")} aria-current={current("/admin")}>
+              Admin
+            </Link>
+          )}
+          <Link href="/report" className={cls("/report")} aria-current={current("/report")}>
+            Report a problem
+          </Link>
+          <span className="pill role">{user.username}</span>
+          <LogoutButton />
+        </>
+      ) : (
+        <>
+          <Link href="/login" className={cls("/login")} aria-current={current("/login")}>
+            Log in
+          </Link>
+          <Link href="/signup" className={cls("/signup", "cta")} aria-current={current("/signup")}>
+            Sign up
+          </Link>
+        </>
+      )}
+    </div>
+  );
+}