shadcn.io is not affiliated with official shadcn/ui
Concert Venues Map Block for Svelte
Eight venues on a drawn town with a strip of seven nights, each with its show count; the pins light with the headliner's initials or go dashed when dark, and a list gives the night's shows by doors time.
Installation
Overview
Show a week of gigs on a map with this concert venues listing for Svelte with Ark UI. Amplewick, a live-music listings site, draws eight venues on a street map of an invented town and puts a strip of seven nights above it, Monday 12 to Sunday 18 October, each night with its show count in a ToggleGroup. Choosing a night re-labels the pins: a venue with a show is solid and carries its headliner's initials, a venue that is dark that night is dashed and hollow with its own code, and the pin's size is the venue's capacity in three steps. Under the map a list gives the night's shows by doors time, each with a genre Badge and "Tickets available" or "Sold out" in words; a night with no shows shows an empty state without changing the height. The list is the way in for the keyboard and the pins are a pointer shortcut. For listings sites, venue guides, festivals' fringe programmes and any "what's on tonight" page.
FAQ
Where do the seven nights come from?
From one constant, AS_OF, a Monday. NIGHTS adds one day at a time with Date.UTC arithmetic and names each with the weekday and date, so nothing reads the clock and the block shows the same week every time. In your app set AS_OF to the start of the week you list.
What do the pin shapes and sizes mean?
Size is capacity (under 300, under 700, and above), the fill says whether the venue has a show that night, and the letters are the headliner's initials or the venue's code when it is dark. Nothing is told by colour alone: a dark venue is dashed and its pin is disabled, and the list gives every fact in words.
Can I use it without a mouse?
Yes. The nights are a toggle group that takes the arrow keys, and every show is a row in the list with a pressed state; pressing a row marks its venue on the map. The pins are hidden from assistive technology because the list says the same things. A polite status line gives the show count and sold-out count for each night.
How do I use my own venues and shows?
Edit VENUES (a name, a capacity and a position in the drawing's 480 by 360 units) and SHOW_LINES, one line per show: night index, venue id, headliner, genre, doors and tickets on sale, where 0 means sold out. The list, the counts, the pin labels and the status line are all derived from them.