kirukib
cb404ec079
Some checks failed
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Has been cancelled
Centralize primary, secondary, tertiary, and neutral tokens and apply them across theme variables and UI components. 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-[#37a47a] text-[#ffffff]",
|
|
"shadow-md transition-colors hover:bg-[#37a47a]/90",
|
|
"[&:hover_.ticket-menu-marquee]:[animation-duration:6s]",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#37a47a] 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
|
|
)}
|
|
/>
|
|
);
|
|
}
|