shadcn.io is not affiliated with official shadcn/ui
Sortable Media Mentions About Block for Vue
An index of eight press mentions for a PR tool as two-line rows, each with the masthead, the kind of piece, the day and the headline as a link, and the reach at its end; a Select sorts them by newest or by reach.
Installation
Overview
A press index for Vue with Ark UI, written for Beaconly, a fictional PR tool. A compact header has a Select at its end that sorts the mentions by newest or by largest reach. Below it, eight mentions are rows ruled from rail to rail: the masthead in serif type, a badge for the kind of piece and the day on the first line, the headline as the row's one link on the second, and the monthly readers of the outlet at the end, which drops under the headline on a phone instead of disappearing. The list is the last band of the block, so it ends on its last row. Days are written without a year and sit in time elements. It's built from Select, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For about pages and press pages that want an honest index of coverage rather than a wall of logos. The outlets, headlines and figures are example data.
FAQ
How do I change the mentions?
They are MENTIONS at the top of the file: an outlet, a headline, a kind, the day as month and day for the time element and the same day as read, and the reach as a number. The reach is formatted compactly (1.9M, 640K). Add more rows and keep the order of the data newest first; the sort does the rest.
How does the sort work?
The Select picks between Newest first and Largest reach and the rows are re-ordered in place from the same data; nothing is fetched. A polite status says how the list is sorted, so the change is announced. The Select opens with Enter or Space and moves with the arrow keys on every library.
Why are the days written without a year?
A year goes stale the day the page ships. The days are month and day in time elements, and "newest" is worked out from them, so the list assumes one year of coverage. If you show older pieces, put the full date in the dateTime attribute and sort on that.
How is it read by a screen reader?
The block has an h2, and each mention is a list item with an h3 holding the link. The whole row is clickable through the link's stretched hit area, and its focus ring is drawn around the row. The kind and day are read before the headline, the reach after it.