shadcn.io is not affiliated with official shadcn/ui
Journalist Beat Tree Profile Block for React
A journalist profile as a beat tree: a tree of six beats, sub-beats and stories with the number of stories rolled up on every branch, and a byline card for the story you pick with its outlet, date, length, reading time and Exclusive badge.
Installation
Overview
Show a reporter's clip file as the beats she covers, with this journalist beat tree profile for React with Base UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the reporter: initials, name, role, place and a badge that says how many bylines the file holds across how many beats, counted from the tree. At the start the catalog's Tree View walks six beats, each with two sub-beats and two stories under them. Every branch carries the number of stories under it, rolled up from the leaves, and the arrow keys walk, open and close it. Picking a story shows its byline card at the end, under the tree on a phone: the outlet, the headline, the beat, the date, the length in words, the reading time worked out from it, an outline Badge where the story was an exclusive, and one line for what the sub-beat adds up to. A polite line says which story is showing. The tree scrolls inside a frame of fixed height, so the panel never changes height. It's built from Tree View, Data List, Badge, Avatar and Guides, with a CSS entrance only. The reporter, the outlets and the stories are invented. For a journalists' clip file, a newsroom directory or any profile that is organised by subject.
FAQ
How do I fill it with my own stories?
Edit BEATS: each beat has sub-beats and each sub-beat has stories made with story(id, title, outlet, date, words, exclusive). The tree, the number on every branch, the count in the person band, the reading time (at 220 words a minute) and the line for the sub-beat are all worked out from that data, so nothing is typed twice. Dates are ISO strings, written in UTC so they read the same in every time zone.
How are the numbers on the branches worked out?
A story counts as one and a branch counts the stories under all of its children, so a beat shows the total of its sub-beats. The same count feeds the badge in the person band, "24 bylines across 6 beats", and it follows any change to the data.
How do I walk the tree with the keyboard?
Tab enters the tree on one row. The up and down arrows move between the rows that are showing, the side arrows open and close a branch or move to its parent or first child, Home and End jump to the first and last row, and Enter picks a story. Picking a branch only opens or closes it, so the byline card always shows a story.
What stays local in the demo?
All of it. The stories are typed examples, there are no real outlets or links, and picking a story only changes the card. In your own app link the headline to the published story and load the clip file from your records.
Is it accessible?
The tree is a named tree with its rows reachable by the arrow keys, and the card is a labelled article that says everything in words: an Exclusive badge is text, not a tone. The status line is a polite live region present from the start. The chevrons turn the right way in a right-to-left layout, and the headlines and dates keep their own order.
Related
- Pro
Editor Tracked Changes Profile
Writing and wordsAn editor profile as tracked changes: a paragraph with five edits marked by number, glyph, underline and strike, an Accept and Reject pair on each, Accept all and Reject all, and a clean copy that follows with its word count.
- Pro
Copywriter Sample Shelf Profile
Writing and wordsA copywriter profile as a shelf of four samples: an industry filter with counts over accordion rows, each closed row showing the lift it earned, each open row the brief, the headline before and after, the copy with its word count and the measured result.
- Pro
Author Look Inside Profile
Writing and wordsAn author profile as a look inside: four books with drawn typographic covers, a read-only rating and an award badge, and a reading pane with a drop cap, a text size group and Next and Previous between two pages, beside a Follow toggle.
- Pro
Technical Writer Documentation Types Profile
Writing and wordsA technical writer profile as four kinds of documentation page: tabs for reference, tutorial, how-to and concept, each a drawn mini page with its outline in a side cell, figures for words and reading time, and a press-to-mark part of the page.
- Pro
Knowledge Base Tree Blog
Topics and indexesA help centre's articles as a working tree of topics beside a preview of the picked article: its topic, title, two-sentence summary, last update and an Open article link.
- Pro
Tree View Org Chart Team
Leaders and org chartsA split org chart for a ride-share fleet: copy, an Expand all button and three figures at the start, and a working tree of twenty-two people at the end, with a band that names the picked person's manager and reports.