shadcn.io is not affiliated with official shadcn/ui
Concert Setlist Music Block for Ark UI
A setlist of nineteen songs under Set 1, Set 2 and Encore with a clock time for every song worked out from a start time, a proportional bar you can press, the total show time and a Copy setlist button.
Installation
Overview
Show what was played and when, with this setlist for React with Ark UI. Encorely, a setlist archive, lists The Ninth Ledger at the Foundry Room in a hairline frame with a plus mark on each corner: nineteen songs numbered under Set 1, Set 2 and the Encore, each with its length. A "Set starts" Native Select (21:00 or 21:15) gives every song a clock time worked out from the typed lengths, twenty seconds between songs, a fifteen-minute break and a three-minute wait before the encore, and the total show time is worked out too. A bar draws each song by its length, with the break and the wait hatched; pressing a segment or a row marks that song and says when it started. "Copy setlist" copies the numbered list with its times as plain text. It's built from Native Select, Label, Button and Guides, with a CSS entrance only. For gig archives, tour pages and fan sites.
FAQ
How do I add a different show?
Edit SONGS (each has a title, a length in seconds and a set of set-1, set-2 or encore) and the three gap constants BANTER, BREAK and WAIT. STARTS lists the start times the select offers. The clock times, the set totals, the bar and the copied text are all worked out from those by one helper, rowsOf.
How are the clock times worked out?
The first song starts at the chosen time. Each next song starts when the one before ends plus the gap between them: twenty seconds inside a set, the break between Set 1 and Set 2, the wait before the encore. Times are shown as the floored minute, and the total is rounded to the nearest minute, so it can differ by one from adding the shown times. Nothing reads the clock.
What is the bar for, and is it keyboard-friendly?
It shows the evening at a glance: every segment is as wide as its song, and the hatched gaps are the break and the wait. Pressing a segment marks the song, the same as pressing its row. The segments are a pointer shortcut and are skipped by Tab; the rows below them are buttons that do the same, with the marked one set as current, so keyboard and screen reader users lose nothing.
What does Copy setlist copy?
A plain-text list: the show line, then each set's name and its songs as "1. Title (4:18) 21:00". It uses the browser clipboard when the page may; otherwise the status line says copying is not available here. The result is announced in the polite status line.