4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1cfb,import { useId, type ComponentProps, type CSSProperties } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type Action = { label: string; href: string }; export type CtaTicketDetail = { label: string; value: string }; export type CtaTicketProps = { eyebrow?: string; /** Short intro beside the ticket. */ description?: string; /** Availability line, e.g. "214 of 600 left". */ availability?: string; eventName?: string; edition?: string; ticketNumber?: string; /** Date, venue, city, seat and price rows, set in mono. */ details?: CtaTicketDetail[]; /** The stub: weekday, big day numeral, month + year. */ stub?: { weekday: string; day: string; monthYear: string; note?: string }; primaryAction?: Action; /** Usually a link to an .ics file. */ calendarAction?: Action; /** Stub ink. Defaults to Devsloka blue; a pale tint (#E8F0FF) works with accentForeground "#0A0A0A". */ accent?: string; /** Text colour on the stub. Must pass contrast against `accent`. */ accentForeground?: string; } & ComponentProps<"section">; const DEFAULTS = { eyebrow: "Tickets · On sale now", description: "Two days of risograph, letterpress and type in a riverside warehouse. Forty print studios, six talks, one long lunch. No livestream, no recordings.", availability: "214 of 600 weekend passes left", eventName: "Halftone Days", edition: "Edition 03", ticketNumber: "No. 0412", details: [ { label: "Date", value: "Sat 21 – Sun 22 Nov 2026" }, { label: "Doors", value: "09:30, talks from 11:00" }, { label: "Venue", value: "Armazém 16, Rua da Cintura do Porto" }, { label: "City", value: "Lisbon, Portugal" }, { label: "Seat", value: "General admission, standing" }, { label: "Price", value: "€85 weekend · €50 one day" }, ], stub: { weekday: "Sat", day: "21", monthYear: "Nov 2026", note: "Gate B · Keep this half" }, primaryAction: { label: "Get tickets", href: "#" }, calendarAction: { label: "Add to calendar", href: "#" }, accent: "#0A6EFF", accentForeground: "#FFFFFF", }; // Deterministic bar widths for the printed barcode on the stub. const BARCODE = [3, 1, 2, 1, 1, 3, 2, 1, 3, 1, 1, 2, 3, 1, 2, 2, 1, 3, 1, 1, 2, 1, 3, 2]; const BARCODE_WIDTH = BARCODE.reduce((sum, w) => sum + w, 0); // Even entries are ink bars, odd entries are gaps. const BARS = BARCODE.flatMap((w, i) => { const x = BARCODE.slice(0, i).reduce((sum, v) => sum + v, 0); return i % 2 === 0 ? [{ x, w }] : []; }); export function CtaTicket({ eyebrow = DEFAULTS.eyebrow, description = DEFAULTS.description, availability = DEFAULTS.availability, eventName = DEFAULTS.eventName, edition = DEFAULTS.edition, ticketNumber = DEFAULTS.ticketNumber, details = DEFAULTS.details, stub = DEFAULTS.stub, primaryAction = DEFAULTS.primaryAction, calendarAction = DEFAULTS.calendarAction, accent = DEFAULTS.accent, accentForeground = DEFAULTS.accentForeground, className, style, ...props }: CtaTicketProps) { const headingId = useId(); return (

{eyebrow}

{description}

{availability && (

{availability}

)}

{/* Main part of the ticket. */}

Admit one · {ticketNumber} {edition}

{eventName}

{d.label}: {d.value}

{calendarAction.label}

{/* Tear-off stub: perforated edge plus two notches punched out in the page colour. */}

{stub.weekday} {stub.day} {stub.monthYear}

{stub.weekday}

{stub.day}

{stub.monthYear}

{stub.note &&

{stub.note}

}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@devsloka","registryDependencies":["button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/cta/cta-ticket.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]