43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
|
|
const navItems = [
|
|
{ href: "/", label: "Home", className: "bg-[#e0483d] hover:bg-[#cb3a30]" },
|
|
{ href: "/lessons", label: "Lessons", className: "bg-[#f08b24] hover:bg-[#d97706]" },
|
|
{ href: "/practice", label: "Practice", className: "bg-[#1faa59] hover:bg-[#168845]" },
|
|
];
|
|
|
|
export function Header() {
|
|
return (
|
|
<header className="sticky top-0 z-50 border-b-4 border-[#1c4ab7] bg-[#2f65e8] text-white">
|
|
<div className="mx-auto max-w-6xl playground-frame border-b-0 border-t-0 bg-[#2f65e8] shadow-none">
|
|
<div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
|
|
<Link href="/" className="group flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#ffd043] text-[#10308a] shadow-md">
|
|
<span className="text-lg font-extrabold">C</span>
|
|
</div>
|
|
<div className="rounded-md bg-white px-2.5 py-1 leading-none shadow-sm">
|
|
<p className="text-2xl font-extrabold tracking-tight text-[#17367d]">Cabrits</p>
|
|
<p className="text-xs font-bold uppercase tracking-[0.14em] text-[#3a5ea8]">Math Playground</p>
|
|
</div>
|
|
</Link>
|
|
<div className="flex items-center gap-2 text-xs font-bold sm:text-sm">
|
|
<span className="rounded-full bg-[#1a49b6] px-3 py-1">Ages 12-16</span>
|
|
<span className="rounded-full bg-[#1a49b6] px-3 py-1">Form 1 Term 2</span>
|
|
</div>
|
|
</div>
|
|
<nav className="flex flex-wrap gap-1 bg-[#1b49b5] px-2 pb-2 pt-1">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`rounded-sm px-4 py-2 text-sm font-extrabold text-white transition-colors ${item.className}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|