1a710aa3c6
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
128 lines
4.4 KiB
TypeScript
128 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ChevronDown, Menu } from "lucide-react";
|
|
import { BrandLogo } from "@/components/brand/BrandLogo";
|
|
import { NavTicketsCta } from "@/components/layout/NavTicketsCta";
|
|
import { programDays } from "@/content/program";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const navPills = [
|
|
{ href: "/speakers", label: "Lineup" },
|
|
{ href: "/pitch-competition", label: "Pitch", badge: "Grants" },
|
|
{ href: "/partners", label: "Partners" },
|
|
{ href: "/exhibit", label: "Exhibit" },
|
|
];
|
|
|
|
const pillClass =
|
|
"inline-flex items-center gap-1.5 rounded-full bg-[#1a5c38]/10 px-4 py-2 text-sm font-medium text-[#0d3d26] transition-colors hover:bg-[#1a5c38]/15";
|
|
|
|
export function SiteHeader() {
|
|
return (
|
|
<header className="fixed inset-x-0 top-0 z-50 px-3 pt-3 md:px-6 md:pt-4">
|
|
<div
|
|
className={cn(
|
|
"mx-auto flex max-w-6xl items-center gap-2 rounded-full",
|
|
"border border-[#1a5c38]/10 bg-white/95 px-2 py-2",
|
|
"shadow-lg shadow-[#1a5c38]/10 backdrop-blur-md"
|
|
)}
|
|
>
|
|
<BrandLogo className="min-w-0 shrink pl-0.5" compact />
|
|
|
|
<nav className="hidden flex-1 items-center justify-center gap-1.5 lg:flex">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button type="button" className={cn(pillClass, "gap-1")}>
|
|
Program
|
|
<ChevronDown className="size-3.5 opacity-60" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-72 rounded-2xl p-2">
|
|
{programDays.map((day) => (
|
|
<DropdownMenuItem key={day.id} asChild>
|
|
<Link href="/program" className="cursor-pointer rounded-xl p-3">
|
|
<p className="text-xs font-medium uppercase text-muted-foreground">
|
|
{day.date}
|
|
</p>
|
|
<p className="font-semibold">{day.title}</p>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
))}
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
href="/pitch-competition"
|
|
className="mt-1 cursor-pointer rounded-xl bg-[#1a5c38] p-3 text-white"
|
|
>
|
|
Pitch Competition
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
{navPills.map((link) => (
|
|
<Link key={link.href} href={link.href} className={pillClass}>
|
|
{link.label}
|
|
{link.badge && (
|
|
<span className="rounded bg-[#1a5c38] px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white">
|
|
{link.badge}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="ml-auto flex items-center gap-2 pr-1">
|
|
<NavTicketsCta className="hidden sm:inline-flex" />
|
|
|
|
<Sheet>
|
|
<SheetTrigger asChild className="lg:hidden">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="rounded-full text-[#0f0404] hover:bg-[#1f3d7e]/10"
|
|
aria-label="Open menu"
|
|
>
|
|
<Menu className="size-5" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="w-[300px]">
|
|
<SheetHeader>
|
|
<SheetTitle>Menu</SheetTitle>
|
|
</SheetHeader>
|
|
<nav className="mt-6 flex flex-col gap-2">
|
|
<Link href="/program" className="rounded-lg px-3 py-2 hover:bg-muted">
|
|
Program
|
|
</Link>
|
|
{navPills.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="rounded-lg px-3 py-2 hover:bg-muted"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<NavTicketsCta className="mt-4" fullWidth />
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|