working auth

2025-12-03 10:50:25 -05:00
parent 3e3e0b0466
commit 606b926886
389 changed files with 2793 additions and 12188 deletions
@@ -0,0 +1,79 @@
+// components/TopNav.tsx
+"use client";
+
+import Link from "next/link";
+import { useAuth } from "@/context/AuthContext";
+
+export function TopNav() {
+  const { user, logout, loading } = useAuth();
+
+  return (
+    <header className="border-b border-zinc-800 bg-black/95 backdrop-blur">
+      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
+        {/* Brand / Home link */}
+        <Link
+          href="/"
+          className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-400"
+        >
+          The Build Bench
+        </Link>
+
+        {/* Right side actions */}
+        <div className="flex items-center gap-3">
+          {/* Search placeholder */}
+          <button
+            type="button"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
+            aria-label="Search (coming soon)"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-4 w-4"
+            >
+              <circle cx="11" cy="11" r="6" />
+              <line x1="16.5" y1="16.5" x2="21" y2="21" />
+            </svg>
+          </button>
+
+          {loading ? (
+            <span className="text-xs text-zinc-500">Checking session…</span>
+          ) : user ? (
+            <>
+              <span className="text-xs text-zinc-300">
+                {user.displayName || user.email}
+              </span>
+              <button
+                type="button"
+                onClick={logout}
+                className="text-xs font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
+              >
+                Log Out
+              </button>
+            </>
+          ) : (
+            <>
+              <Link
+                href="/login"
+                className="text-xs font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
+              >
+                Log In
+              </Link>
+              <Link
+                href="/register"
+                className="rounded-md border border-amber-400/70 bg-amber-400/10 px-3 py-1.5 text-xs font-semibold text-amber-200 hover:bg-amber-400/20 transition-colors"
+              >
+                Join Beta
+              </Link>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,34 @@
+// components/ProtectedPage.tsx
+"use client";
+
+import { ReactNode, useEffect } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export function ProtectedPage({ children }: { children: ReactNode }) {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (!loading && !user) {
+      const next = encodeURIComponent(pathname || "/");
+      router.replace(`/login?next=${next}`);
+    }
+  }, [loading, user, router, pathname]);
+
+  if (loading) {
+    return (
+      <main className="min-h-screen bg-black text-zinc-50 flex items-center justify-center">
+        <p className="text-sm text-zinc-500">Checking your session…</p>
+      </main>
+    );
+  }
+
+  if (!user) {
+    // We just redirected; render nothing
+    return null;
+  }
+
+  return <>{children}</>;
+}