vibe coded v1

src/components/AppHeader.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { Link, useNavigate } from "react-router";
+import { useAuth } from "../hooks/useAuth.ts";
+
+export function AppHeader({ centerSlot }: { centerSlot?: ReactNode }) {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+
+  return (
+    <header className={`app-header${centerSlot ? " app-header--has-center" : ""}`}>
+      <Link to="/" className="app-header-brand">🚚 gerbeur</Link>
+
+      {centerSlot && <div className="app-header-center">{centerSlot}</div>}
+
+      <nav className="app-header-nav">
+        {user ? (
+          <>
+            <Link to={`/users/${user.username}`} className="app-header-user">
+              {user.username}
+            </Link>
+            <button className="btn-primary" onClick={() => navigate("/dumps/new")}>+ New</button>
+          </>
+        ) : (
+          <>
+            <button onClick={() => navigate("/login")}>Log in</button>
+            <button className="btn-primary" onClick={() => navigate("/register")}>Register</button>
+          </>
+        )}
+      </nav>
+    </header>
+  );
+}