First commit

2026-02-07 18:08:42 -06:00
commit b7a86a2d1c
57 changed files with 9188 additions and 0 deletions
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { ASSISTANT_TOGGLE_EVENT } from "@/components/AssistantDrawer";
+import { supabaseBrowser } from "@/lib/supabase/browser";
+
+type NavLink = {
+  href: string;
+  label: string;
+};
+
+const navLinks: NavLink[] = [
+  { href: "/", label: "Home" },
+  { href: "/courses", label: "Courses" },
+  { href: "/case-studies", label: "Case Studies" },
+  { href: "/practice", label: "Practice" },
+];
+
+export default function Navbar() {
+  const pathname = usePathname();
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+
+  const linkClass = (href: string) =>
+    pathname === href || pathname?.startsWith(`${href}/`)
+      ? "rounded-xl bg-brand px-5 py-3 text-sm font-semibold text-white shadow-sm"
+      : "rounded-xl px-5 py-3 text-sm font-semibold text-slate-700 transition-colors hover:text-brand";
+
+  useEffect(() => {
+    const client = supabaseBrowser();
+    if (!client) return;
+
+    let mounted = true;
+
+    client.auth.getUser().then(({ data }) => {
+      if (!mounted) return;
+      setUserEmail(data.user?.email ?? null);
+    });
+
+    const { data } = client.auth.onAuthStateChange((_event, session) => {
+      setUserEmail(session?.user?.email ?? null);
+    });
+
+    return () => {
+      mounted = false;
+      data.subscription.unsubscribe();
+    };
+  }, []);
+
+  const authNode = useMemo(() => {
+    if (!userEmail) {
+      return (
+        <div className="flex items-center gap-2 text-sm">
+          <Link className="rounded-lg border border-slate-300 px-3 py-1.5 hover:bg-slate-50" href="/auth/login">
+            Login
+          </Link>
+          <Link className="rounded-lg bg-brand px-3 py-1.5 text-white hover:brightness-105" href="/auth/signup">
+            Sign up
+          </Link>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex items-center gap-2 text-sm">
+        <span className="max-w-36 truncate text-slate-700">{userEmail}</span>
+        <button
+          className="rounded-lg border border-slate-300 px-3 py-1.5 hover:bg-slate-50"
+          onClick={async () => {
+            const client = supabaseBrowser();
+            if (!client) return;
+            await client.auth.signOut();
+          }}
+          type="button"
+        >
+          Logout
+        </button>
+      </div>
+    );
+  }, [userEmail]);
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-slate-300 bg-[#f7f7f8]/95 backdrop-blur">
+      <div className="mx-auto flex w-full max-w-[1300px] items-center justify-between gap-4 px-4 py-3">
+        <div className="flex items-center gap-8">
+          <Link className="flex items-center gap-3" href="/">
+            <div className="rounded-xl bg-[#edd7bc] p-1.5 shadow-sm">
+              <Image alt="ACVE logo" className="h-10 w-10 rounded-lg object-cover" height={40} src="/images/logo.png" width={40} />
+            </div>
+            <div>
+              <div className="text-2xl font-bold leading-none tracking-tight text-brand md:text-4xl">ACVE</div>
+              <div className="-mt-1 text-xs text-slate-500 md:text-sm">Centro de Estudios</div>
+            </div>
+          </Link>
+          <nav className="hidden items-center gap-1 text-sm lg:flex">
+            {navLinks.map((link) => (
+              <Link key={link.href} className={linkClass(link.href)} href={link.href}>
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            className="rounded-xl border border-accent bg-white px-4 py-2.5 text-sm font-semibold text-accent hover:bg-amber-50"
+            onClick={() => window.dispatchEvent(new Event(ASSISTANT_TOGGLE_EVENT))}
+            type="button"
+          >
+            AI Assistant
+          </button>
+          {authNode}
+        </div>
+      </div>
+      <nav className="mx-auto flex w-full max-w-[1300px] gap-2 overflow-x-auto px-4 pb-3 text-sm lg:hidden">
+        {navLinks.map((link) => (
+          <Link key={link.href} className={linkClass(link.href)} href={link.href}>
+            {link.label}
+          </Link>
+        ))}
+      </nav>
+    </header>
+  );
+}