mdares/ACVE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

advance

Browse Source
This commit is contained in:
Marcelo
2026-02-17 00:07:00 +00:00
parent b7a86a2d1c
commit be4ca2ed78
92 changed files with 6850 additions and 1188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
components/Navbar.tsx Normal file → Executable file
View File

@@ -2,10 +2,15 @@
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { usePathname } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import { ASSISTANT_TOGGLE_EVENT } from "@/components/AssistantDrawer";
import { DEMO_AUTH_EMAIL_COOKIE, DEMO_AUTH_ROLE_COOKIE } from "@/lib/auth/demoAuth";
import { isTeacherEmailAllowed, readTeacherEmailsBrowser } from "@/lib/auth/teacherAllowlist";
import { supabaseBrowser } from "@/lib/supabase/browser";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
type NavLink = {
href: string;
@@ -21,105 +26,162 @@ const navLinks: NavLink[] = [
export default function Navbar() {
const pathname = usePathname();
const router = useRouter();
const [userEmail, setUserEmail] = useState<string | null>(null);
const [isTeacher, setIsTeacher] = useState(false);
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";
const teacherEmails = useMemo(() => readTeacherEmailsBrowser(), []);
useEffect(() => {
const client = supabaseBrowser();
if (!client) return;
if (!client) {
const cookieMap = new Map(
document.cookie
.split(";")
.map((entry) => entry.trim())
.filter(Boolean)
.map((entry) => {
const [key, ...rest] = entry.split("=");
return [key, decodeURIComponent(rest.join("="))] as const;
}),
);
const email = cookieMap.get(DEMO_AUTH_EMAIL_COOKIE) ?? null;
const role = cookieMap.get(DEMO_AUTH_ROLE_COOKIE) ?? "";
setUserEmail(email);
setIsTeacher(role === "teacher" || isTeacherEmailAllowed(email, teacherEmails));
return;
}
let mounted = true;
client.auth.getUser().then(({ data }) => {
if (!mounted) return;
setUserEmail(data.user?.email ?? null);
const email = data.user?.email ?? null;
setUserEmail(email);
setIsTeacher(isTeacherEmailAllowed(email, teacherEmails));
});
const { data } = client.auth.onAuthStateChange((_event, session) => {
setUserEmail(session?.user?.email ?? null);
const email = session?.user?.email ?? null;
setUserEmail(email);
setIsTeacher(isTeacherEmailAllowed(email, teacherEmails));
});
return () => {
mounted = false;
data.subscription.unsubscribe();
};
}, []);
}, [teacherEmails]);
const links = useMemo(() => {
if (!isTeacher) return navLinks;
return [...navLinks, { href: "/teacher", label: "Teacher Dashboard" }];
}, [isTeacher]);
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 className="flex items-center gap-2">
<Button variant="outline" size="sm" asChild>
<Link href="/auth/login">Login</Link>
</Button>
<Button size="sm" asChild>
<Link href="/auth/signup">Sign up</Link>
</Button>
</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"
<span className="hidden max-w-36 truncate text-muted-foreground sm:inline-block">{userEmail}</span>
{!isTeacher ? (
<Link
className="inline-flex items-center rounded-md border border-amber-300 bg-amber-50 px-2 py-1 text-xs font-semibold text-amber-900"
href="/auth/login?role=teacher"
>
Teacher area (Teacher only)
</Link>
) : null}
<Button
variant="outline"
size="sm"
onClick={async () => {
const client = supabaseBrowser();
if (!client) return;
if (!client) {
document.cookie = `${DEMO_AUTH_EMAIL_COOKIE}=; path=/; max-age=0`;
document.cookie = `${DEMO_AUTH_ROLE_COOKIE}=; path=/; max-age=0`;
setUserEmail(null);
setIsTeacher(false);
router.refresh();
return;
}
await client.auth.signOut();
}}
type="button"
>
Logout
</button>
</Button>
</div>
);
}, [userEmail]);
}, [isTeacher, router, userEmail]);
return (
<header className="sticky top-0 z-40 border-b border-slate-300 bg-[#f7f7f8]/95 backdrop-blur">
<header className="sticky top-0 z-40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<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">
<div className="rounded-xl bg-accent 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 className="text-2xl font-bold leading-none tracking-tight text-primary md:text-4xl">ACVE</div>
<div className="-mt-1 text-xs text-muted-foreground 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>
))}
{links.map((link) => {
const isActive = pathname === link.href || pathname?.startsWith(`${link.href}/`);
return (
<Button
key={link.href}
variant={isActive ? "default" : "ghost"}
asChild
className={cn("rounded-xl text-sm font-semibold", !isActive && "text-muted-foreground hover:text-primary")}
>
<Link href={link.href}>{link.label}</Link>
</Button>
);
})}
</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"
<Button
variant="outline"
className="border-primary/20 text-primary hover:bg-primary/5 hover:text-primary"
onClick={() => window.dispatchEvent(new Event(ASSISTANT_TOGGLE_EVENT))}
type="button"
>
AI Assistant
</button>
</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>
))}
{links.map((link) => {
const isActive = pathname === link.href;
return (
<Button
key={link.href}
variant={isActive ? "default" : "ghost"}
size="sm"
asChild
className="whitespace-nowrap rounded-xl"
>
<Link href={link.href}>{link.label}</Link>
</Button>
);
})}
</nav>
</header>
);