3693495dd0
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Use mainwhite.svg on white sections with curvy green transitions into flat green bands, improve text and button contrast, and deploy via OpenNext on Cloudflare Workers. Co-authored-by: Cursor <cursoragent@cursor.com>
70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
|
import { site } from "@/content/site";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** One arrow before “Tickets” — avoids the old “→ Tickets →” double-arrow on one side */
|
|
export const TICKET_MARQUEE_SEGMENT = "→ Tickets ";
|
|
|
|
type MarqueeProps = {
|
|
className?: string;
|
|
onNavigate?: () => void;
|
|
/** Visually hidden label for icon-only / marquee control */
|
|
"aria-label"?: string;
|
|
};
|
|
|
|
/**
|
|
* Gold pill with continuous horizontal marquee — used in header (sm+) and mobile nav sheet.
|
|
*/
|
|
export function TicketsMarqueeCta({
|
|
className,
|
|
onNavigate,
|
|
"aria-label": ariaLabel = "Get tickets",
|
|
}: MarqueeProps) {
|
|
const repeated = Array.from({ length: 8 }, (_, i) => (
|
|
<span key={i} className="shrink-0 px-1 font-bold whitespace-nowrap">
|
|
{TICKET_MARQUEE_SEGMENT}
|
|
</span>
|
|
));
|
|
|
|
return (
|
|
<Link
|
|
href={site.links.ticketsUrl}
|
|
onClick={onNavigate}
|
|
aria-label={ariaLabel}
|
|
className={cn(
|
|
"relative flex items-center overflow-hidden rounded-full bg-[#ffb300] text-[#0f0404]",
|
|
"shadow-md transition-colors hover:bg-[#ffb300]/90",
|
|
"[&:hover_.ticket-menu-marquee]:[animation-duration:6s]",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#ffb300] focus-visible:ring-offset-2",
|
|
className
|
|
)}
|
|
>
|
|
<span className="ticket-menu-marquee flex w-max items-center py-2.5">
|
|
{repeated}
|
|
{repeated}
|
|
</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
type Props = {
|
|
className?: string;
|
|
/** Full-width pill (e.g. stacked in a narrow column) */
|
|
fullWidth?: boolean;
|
|
};
|
|
|
|
/** Header / tablet — same marquee as mobile sheet, sized for the navbar */
|
|
export function NavTicketsCta({ className, fullWidth }: Props) {
|
|
return (
|
|
<TicketsMarqueeCta
|
|
className={cn(
|
|
"ticket-cta-pulse shrink-0",
|
|
fullWidth
|
|
? "h-12 w-full min-w-0 max-w-none justify-center"
|
|
: "h-10 min-w-[9.25rem] max-w-[11rem] sm:h-11 sm:min-w-[10rem] sm:max-w-[12rem]",
|
|
className
|
|
)}
|
|
/>
|
|
);
|
|
}
|