shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Answer "what time is that for me?" before anyone asks with this virtual event card for React with React Aria. A hairline frame holds a drawn video call at the start and a Select of seven cities (Los Angeles, New York, London, Paris, Mumbai, Tokyo, Sydney). Choosing one rewrites the start in that city's own time, "Thu 12 Nov, 08:00 to 11:00", and when the local time falls past midnight it says so in words and moves the date to Friday 13 Nov. The offsets are one typed table, valid on that date. At the end a Free, Standard and VIP choice sets the price, and one Shine Button reserves the seat. A ghost button really saves a .ics calendar file, built in the browser. For online conferences, webinars and launches with a worldwide audience.
FAQ
How do I add a city or change the date?
Add an entry to CITIES with its offset in minutes from UTC on the event date, and the same entry to the select's collection. The start is START_UTC in minutes, the length is HOURS, and BASE_DAY and BASE_WEEKDAY give the date that the day shift counts from.
Why a typed table and not Intl time zones?
Offsets change with daylight saving, and the output of Intl differs between the server and the browser. A typed table valid for one date is the same everywhere and is easy to check. For a series of events, compute the offsets on the server for each date and pass them in.
Does Add to calendar really work?
Yes. It builds a small calendar file from the lines in CALENDAR_LINES, in UTC so every calendar converts it, and saves it with a download link made in the click handler. Nothing is uploaded.
What stays local, and how do I wire it for real?
The seat, the choice of tier and the city are page state, and nothing is sent. Replace the body of reserve with a call to your registration service, and the platform line with your own streaming details.
