shadcn.io is not affiliated with official shadcn/ui
Event RSVP Music Block for React Aria
Five showcase sets as tick rows, three ticket types that decide which sets are open and the booking limit, a capped group stepper and a summary that works out your arrival, your stay and the price in cents.
Installation
Overview
Let people choose the sets they will catch, not just a ticket, with this event RSVP for React with React Aria. Openbill, a showcase night organiser, lists five acts at Northgate Barn in a hairline frame with a plus mark on each corner, each a tick row with its time and stage. Three ticket types (General from 19:00, Early entry from 18:30, VIP with the meet-and-greet) decide which sets are open: a set that starts before the door time shows a lock and the reason instead of a box, and Early entry unlocks the 18:40 act. The type also sets how many tickets one booking holds, and a group stepper is capped by it in words. A summary cell works out when you would arrive and leave, the length of the stay, and the price in whole cents. Reserve is the only Shine Button: it derives a reservation code from the type, the group and the sets, with a Copy button (Button), and says it is held in this demo with nothing charged. It's built from Button, Shine Button and Guides, with a CSS entrance only. For showcases, festivals and club nights.
FAQ
How do I add my own acts and tickets?
Edit ACTS (an id, a name, a stage, and the start and end in minutes after midnight) and ENTRIES (an id, a name, a price in cents, the door time, the booking limit and a short code). FEE is the booking fee for each ticket. The rows, the locks, the summary and the code are all worked out from those.
How do the locks work?
A set is open when it starts at or after the door time of the chosen ticket. A set that is not open has no checkbox, only a lock and a sentence saying when it opens and why. Switching to a ticket with later doors unticks any set that is no longer open and says so in the status line.
How are the arrival and the price worked out?
Arrival is the start of the earliest ticked set and the stay ends at the end of the latest, so ticking the 19:40 and 21:15 sets reads "arrive for 19:40 and stay until 22:05: 2 h 25 min". The price is the group size times the ticket price plus the booking fee for each, in integer cents; with two Early entry tickets that is 2 x $24.00 plus $2.00 each, $52.00.
What is the reservation code?
A short code made from the venue prefix, the ticket type, the group size and a three-character check derived from which sets are ticked, such as NGB-GEN-2-8D1. It is derived, not issued: the same choices always give the same code, and changing any choice clears the held state. Copy puts it on the clipboard.
What stays local, and how do I make it real?
Everything. Reserve writes "Held until 17:00 on show day, in this demo. Nothing was charged." and no place is held. To make it real, send the ticket, the group and the ticked sets to your server, hold the places there and return a code it issued, and take payment through your provider's hosted fields.