shadcn.io is not affiliated with official shadcn/ui
Editable Talking Points Pitch Contact Block for Svelte
A podcast pitch built from three talking points you can edit and reorder, plus an audience size and an episode format.
Installation
Overview
A pitch for Svelte with Ark UI, for Skerrycast, a coastal interview podcast. Three talking points sit in a band. Click one to edit it, Enter saves, and Escape puts the old wording back. Up and down buttons reorder the three points. Under them, a Select asks for the audience size and a Segment Group asks for the format: interview, solo, panel or narrative. The form also asks for the show name, your name and an email. Submitting checks every field, including that each point has been saved with some text, shows each problem under its control and moves focus to the first empty one. A valid pitch turns into a confirmation in the same space, repeating the show, the format, the audience, the email and the three points in order. The page's rails and top rule come from Guides. It's built from Editable, Segment Group, Select, Field, Input, Shine Button, Button and Guides, with CSS for the header entrance and your theme's tokens for every colour. For podcasts, shows and any page where the pitch is a short ordered list.
FAQ
Where does the pitch go?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call: details holds the show, format, audience, name and email, and points holds the three lines in order. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How does editing a point work?
Click the point. The Editable control opens an input, Enter commits the text, and Escape restores what was there before the edit. A point that is still empty fails the submit, and focus moves to that point. The three starters are harbour, boat and tide lines, so the pitch is never a blank list on arrival. Editable is the same Ark control on every base, including the move buttons' neighbours.
How does reordering work?
Each point has an up button and a down button. The first point's up button and the last point's down button are disabled. Moving a point swaps it with its neighbour. The numbers beside the points are their current place, so they follow the order.
Those buttons use onClick and disabled.
Is a format required?
Yes. Interview, Solo, Panel and Narrative start with none selected, and the submit asks you to choose one. The Segment Group is the same control on every base. The audience sizes are worded so the words come before the numbers: under 1,000, up to 10,000, up to 100,000, and over 100,000.
How is the audience select labelled?
The label above it names the control, and focus can land on it when the audience is missing. The Field takes the select's id, so its label and the hidden native select share it.
Are the email address and phone number real?
No. hello@skerrycast.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0192 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file. The phone number keeps its order in a right-to-left layout.