50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import Link from "next/link"
|
|
|
|
import { Monogram } from "@/components/invite/monogram"
|
|
|
|
const links = [
|
|
["Introduction", "#introduction"],
|
|
["Our story", "#story"],
|
|
["Details", "#details"],
|
|
["Schedule", "#schedule"],
|
|
["FAQ", "#faq"],
|
|
["RSVP", "#rsvp"],
|
|
] as const
|
|
|
|
export function SiteHeader() {
|
|
return (
|
|
<header className="absolute inset-x-0 top-0 z-20 px-wedding-gutter-mobile py-6 wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop">
|
|
<div className="flex items-center justify-between">
|
|
<Link href="#top" aria-label="Back to top">
|
|
<Monogram light />
|
|
</Link>
|
|
<nav aria-label="Invitation sections" className="hidden wedding-lg:block">
|
|
<ul className="flex items-center gap-6">
|
|
{links.map(([label, href]) => (
|
|
<li key={href}>
|
|
<Link className="font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label text-wedding-white" href={href}>
|
|
{label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
<details className="group relative wedding-lg:hidden">
|
|
<summary className="cursor-pointer list-none font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label text-wedding-white">
|
|
Menu <span aria-hidden="true">☰</span>
|
|
</summary>
|
|
<nav aria-label="Invitation sections" className="absolute right-0 top-8 w-48 bg-wedding-ivory p-5 shadow-lg">
|
|
<ul className="space-y-4">
|
|
{links.map(([label, href]) => (
|
|
<li key={href}>
|
|
<Link className="wedding-text-link" href={href}>{label}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</details>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|