shadcn.io is not affiliated with official shadcn/ui
Podcasts Team Block for Vue
A podcast host's own show: the latest episode in a framed cell with a drawn waveform and a Listen link, over earlier episodes as rows with a length bar and a Newest or Longest switch.
Installation
Overview
A team podcast section for Vue with Ark UI, written for Sedbergh, a fictional company that hosts podcasts. A compact header says which episode is the latest and how many came before it. Under it the latest episode sits in a framed cell with corner + marks: its number, its title, the speakers (an initials avatar stack and their names), a drawn waveform with the length under it, and one Listen button, the page's Shine Button. Below, a band holds the heading "Earlier episodes" and a Newest or Longest switch, and four earlier episodes follow as rows rail to rail that end the block. Each row has the number, the title as a link, who spoke, and a bar scaled to the longest of the four. Switching re-orders the rows in place and they share one height, so nothing moves. Nothing plays: the waveform is a drawing, and Listen and every title are links to the episode. It is built from Avatar, Segment Group, Shine Button and Guides with your theme's tokens. The show, the episodes and the speakers are made up for the example.
FAQ
How do I change the episodes?
Edit EPISODES at the top of the file, newest first: a number, a title, the speakers (a name and a role each) and the length in minutes. The first is the featured episode; the rest are the earlier rows. The bar lengths are worked out from the longest of the earlier episodes, and the sort is computed from the same data.
Does anything play?
No. The waveform is a drawing, a row of bars from a list of heights, hidden from assistive technology. Listen and each episode title are plain links (href="#"): point them at your host's page, your feed or a player of your own. The length is written out as text, so it doesn't depend on the drawing.
How does the Newest and Longest switch work?
It is a radio group named "Order earlier episodes": Tab moves into it and the arrow keys move between the two choices, choosing as they go. The rows re-order straight away, a polite status line says which order is showing, and the page keeps its height because every row is the same height.
Where does the Listen button go?
It is a link.
The button takes asChild with the link inside, so it can be your router's link.