Split Panel Waveform Visual CTA Block for React

Edit CHANNELS at the top of the file: each entry has a title, a one-line description and an href. The links are # placeholders. Point each at the deep link or page for that app, and add or remove rows without touching the layout. The same FEED_URL constant feeds the address field and the copy button.

No, it's decoration. The bars are heights listed in BARS, drawn with CSS, and they grow from the baseline once on load. There is no play button, because nothing here plays: the latest episode is plain text under the waveform, and the Shine Button is the link to it. The waveform is hidden from screen readers, and the bars stay still with reduced motion.

It's a read-only field named "Feed address", so assistive technology reads the address and a visitor can select it. The button beside it copies the same string, swaps its icon for a check for three seconds and a polite status says "Copied", or "Couldn't copy" if the clipboard refuses. The address is always laid out left to right, on right-to-left pages too.

Each row is one link: the title and the description are its text, and a hidden ", subscribe" follows the title so four links never read as bare names. The arrow is decoration and mirrors on right-to-left pages. Each row has a focus ring and underlines its title on hover.

A date typed into a block goes stale. The panel shows the episode's number, title and length instead, and the pitch says "every Tuesday", which stays true. If your site knows the date, add it from your data when you render the block.

The panels stack, with the copy first and the waveform panel after it under a ruled line; on large screens the panel moves to the start. The bars share the panel's width and the link rows and the feed field take the full width, so nothing scrolls sideways at 320 pixels.