shadcn.io is not affiliated with official shadcn/ui
Concert Countdown Music Block for React
A fixed count to doors in days, hours and minutes, a running order with a Leave home row worked out from travel time and a buffer, a Remind me switch and a real .ics calendar download.
Installation
Overview
Tell people when to leave, not just how long to wait, with this concert countdown for React with Base UI. Doorsat, a gig companion, shows Cobalt Orchard at The Cellar at Pell Street in a small hairline frame with a plus mark on each corner. A band of three figures (Counting Number) gives the time to doors, counted once from a fixed date: 12 days, 7 hours, 30 minutes. Nothing ticks, and the page says so. The running order is a vertical list (doors, support, headliner, curfew) with a "Leave home" row worked out from a travel time in minutes and a buffer set in a Native Select. A Switch turns Remind me on. "Add to calendar" is the only Shine Button and saves a real .ics file (Download Trigger). It's built from Counting Number, Input, Native Select, Switch, Download Trigger, Shine Button and Guides, with a CSS entrance only. For gig apps, ticket confirmations and event pages.
FAQ
How do I set my own night?
Edit ORDER (an id, a title, a note and the start in minutes after midnight), DOORS, NIGHT and the two Date.UTC constants for the fixed "now" and for doors. The three figures, the running order and the file are worked out from those.
Why does nothing tick?
A count that ticks needs a clock and a timer on every page, and a page that reads the clock cannot render the same on the server and in the browser. This one counts once from a fixed instant (Monday 12 October, 11:00). To make a live one, read the real time after the page loads and update it once a minute, with a pause control.
How is the leave-by time worked out?
Doors minus the travel time minus the buffer, in minutes after midnight: with 45 minutes of travel and a 15-minute buffer, doors at 18:30 give 17:30. The travel field takes whole minutes from 0 to 240; anything else shows a problem line and the time reads --:--. Reserved space for that line keeps the panel from moving.
What is in the calendar file?
A real .ics file with one event from doors to curfew, a location, a description with the leave-by time and, when Remind me is on, an alarm that fires the travel time plus the buffer before doors. Times are floating local times, the lines end in CRLF as the format asks, and it opens in any calendar app.