shadcn.io is not affiliated with official shadcn/ui
Edition Switch Footer Block for Solid
A footer for a design conference with a segmented edition switch that swaps the venue, the talk count and the ticket price, then links to that edition's tickets.
Installation
Overview
An edition switch for Lathewick Summit, a design-engineering conference, for Solid with Ark UI. The first band holds the wordmark and a segmented group of three editions (Lisbon, Austin, Online). Choosing one swaps the venue, a line of days, talks and seats, and the ticket price, all read from that edition, and a polite status says what is showing. A Shine Button links to that edition's tickets, and a short sponsor line sits under them. On a phone the segmented group scrolls sideways inside its own row. A nav band and a legal band follow. There are no dates: the editions are places. It's built from SegmentGroup, ShineButton, Guides and your theme's tokens.
FAQ
How do I change the editions?
Edit EDITIONS at the top of the file. Each entry has a name, a venue, a currency, a price, counts for days, talks and seats, and the href the ticket button uses. The price and the count line are written by priceOf and lineOf, so the band and the status announcement stay in step. Sponsors are the SPONSORS list, names only.
How do I operate the editions with a keyboard?
The editions are a group of radio buttons named Edition. Tab moves into the group, the arrow keys choose an edition, and the venue, the counts and the price change as you go. The choice is announced through a polite status that stays empty until the first change, so the page does not read the default edition twice.
How is Get tickets a link on each library?
It is a real link styled as the Shine Button, and its href is the chosen edition's. The button wraps an anchor. Point each edition's href at its ticket page. Nothing in the footer charges a card.
How does the switch fit on a phone?
The three labels are wider than a narrow screen, so the segmented group sits in a row that scrolls sideways. The scroller is the wrapper around the group, so the selection indicator stays inside the control. The venue, the counts and the price stay three lines, then the button, then the sponsors, then the summit links and the legal row.
How do screen readers move through it?
The block is a footer, so at the end of the page it is the content-info landmark. The summit links are one nav labelled Footer, under a heading. Sponsors and the policy links are labelled lists. Prices and counts sit in isolated runs so a right-to-left page does not reorder the digits.