wired up an accounts page and my builds (my vault)

2025-12-19 08:05:03 -05:00
parent c6d1bce771
commit b76ced45f1
9 changed files with 566 additions and 1055 deletions
@@ -0,0 +1,44 @@
+// app/(account)/account/page.tsx
+"use client";
+
+import { useAuth } from "@/context/AuthContext";
+
+export default function AccountPage() {
+  const { user, loading } = useAuth();
+
+  if (loading) return <div className="text-sm opacity-70">Loading…</div>;
+
+  if (!user) {
+    return (
+      <div className="text-sm opacity-70">
+        You’re not logged in. Please log in to view your account.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold">Profile</h2>
+        <p className="text-sm opacity-70">
+          Basic account info (we’ll expand this soon).
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-white/10 bg-white/5 p-4 space-y-2">
+        <div className="text-sm">
+          <span className="opacity-70">Email:</span>{" "}
+          <span className="font-medium">{user.email}</span>
+        </div>
+        <div className="text-sm">
+          <span className="opacity-70">Display name:</span>{" "}
+          <span className="font-medium">{user.displayName || "—"}</span>
+        </div>
+        <div className="text-sm">
+          <span className="opacity-70">Role:</span>{" "}
+          <span className="font-medium">{user.role}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,60 @@
+// app/(account)/layout.tsx
+import Link from "next/link";
+
+const nav = [
+  { href: "/account", label: "My Account" },
+  { href: "/account/settings", label: "Settings" },
+];
+
+export default function AccountLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen">
+      <div className="mx-auto max-w-6xl px-4 py-6">
+        {/* Header */}
+        <div className="mb-6 flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-semibold">Account</h1>
+            <p className="text-sm opacity-70">
+              Profile, password, and account settings.
+            </p>
+          </div>
+
+          <Link href="/builder" className="text-sm opacity-80 hover:underline">
+            ← Back to Builder
+          </Link>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-[240px_1fr]">
+          <aside className="rounded-xl border border-white/10 bg-white/5 p-3">
+            <nav className="flex flex-col gap-1">
+              {nav.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="rounded-lg px-3 py-2 text-sm opacity-80 hover:bg-white/10 hover:opacity-100"
+                >
+                  {item.label}
+                </Link>
+              ))}
+              <div className="my-2 border-t border-white/10" />
+              <Link
+                href="/vault"
+                className="rounded-lg px-3 py-2 text-sm opacity-80 hover:bg-white/10 hover:opacity-100"
+              >
+                My Vault
+              </Link>
+            </nav>
+          </aside>
+
+          <main className="rounded-xl border border-white/10 bg-white/5 p-4">
+            {children}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}