File size: 5,157 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | "use client";
import Link from "next/link";
import Image from "next/image";
import { Menu } from "lucide-react";
import { usePathname } from "next/navigation";
import { useAuth } from "@/lib/auth/useAuth";
import { coreNavigation } from "@/lib/navigation";
import { cn } from "@/lib/utils";
type HeaderProps = {
onMenuClick: () => void;
};
export function Header({ onMenuClick }: HeaderProps) {
const pathname = usePathname();
const { user } = useAuth();
const initials = (user?.name ?? "Student")
.split(/\s+/)
.map((part) => part[0])
.join("")
.slice(0, 2)
.toUpperCase();
const centerLinks = coreNavigation.filter((item) =>
item.href === "/tuition" || item.href === "/study-chat" || item.href === "/learn-anything"
);
const rightLinks = coreNavigation.filter((item) => item.href === "/sources");
return (
<header className="sticky top-0 z-sticky bg-[#030303]/82 px-4 py-4 backdrop-blur-xl sm:px-6">
<div className="mx-auto grid max-w-7xl grid-cols-[1fr_auto_1fr] items-center gap-3">
<Link href="/study-chat" className="flex min-w-0 items-center gap-3 justify-self-start">
<span className="grid size-9 shrink-0 place-items-center overflow-hidden rounded-xl border border-white/[0.14] bg-white/[0.04] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]">
<Image src="/docdoe-logo-mark.png" alt="DocDoe AI" width={23} height={23} className="object-contain" priority />
</span>
<span className="text-[15px] font-semibold text-white sm:text-base">DocDoe AI</span>
<span className="hidden rounded-full border border-white/[0.12] px-2 py-0.5 text-[9px] font-semibold uppercase tracking-[0.12em] text-white/46 sm:inline-flex">
Beta
</span>
</Link>
<nav className="hidden items-center gap-8 md:flex" aria-label="Main navigation">
{centerLinks.map((item) => {
const active = pathname === item.href || pathname?.startsWith(item.href + "/");
return (
<Link
key={item.href}
href={item.href}
className={cn(
"relative px-1 py-2 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-white/22",
active ? "text-white" : "text-white/46 hover:text-white/82",
)}
>
{item.label}
{active ? <span className="absolute inset-x-0 -bottom-1 h-px rounded-full bg-white/80" aria-hidden="true" /> : null}
</Link>
);
})}
</nav>
<div className="flex items-center justify-end gap-3 justify-self-end">
{rightLinks.map((item) => {
const active = pathname === item.href || pathname?.startsWith(item.href + "/");
return (
<Link
key={item.href}
href={item.href}
className={cn(
"hidden px-1 py-2 text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-white/22 md:inline-flex",
active ? "text-white" : "text-white/48 hover:text-white/82",
)}
>
{item.label}
</Link>
);
})}
<Link
href="/settings"
aria-label="Open profile"
className="hidden size-9 place-items-center rounded-full border border-white/[0.12] bg-white/[0.055] text-[11px] font-bold text-white/78 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition hover:border-white/[0.2] hover:text-white sm:grid"
title={user?.name ?? "Profile"}
>
{initials || "ST"}
</Link>
<button
type="button"
className="touch-ripple grid size-9 place-items-center rounded-xl border border-white/[0.1] bg-white/[0.035] text-white/66 transition hover:border-white/[0.18] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 md:hidden"
onClick={onMenuClick}
aria-label="Open navigation"
>
<Menu className="size-4" />
</button>
</div>
</div>
<nav className="mx-auto mt-4 grid max-w-[24rem] grid-cols-3 rounded-full border border-white/[0.08] bg-white/[0.035] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] md:hidden" aria-label="Study modes">
{centerLinks.map((item) => {
const active = pathname === item.href || pathname?.startsWith(item.href + "/");
return (
<Link
key={item.href}
href={item.href}
className={cn(
"rounded-full px-3 py-2 text-center text-[12px] font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-white/22",
active ? "bg-white/[0.08] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]" : "text-white/42 hover:text-white/78",
)}
>
{item.label}
</Link>
);
})}
</nav>
</header>
);
}
|