Components / Live Post Detail
Live Post Detail
The live-post performance detail: a scrolling stats column (metrics grid, views bars, engagement area, audience breakdowns) beside a sticky 9:16 media preview. Purely presentational; every consumer passes ready data.
import { LivePostDetail, type LivePostBreakdown, type LivePostStat } from '@layers/ui/live-post-detail'Rendered stock
House rules
- Props in only: no fetching and no routing. The marketing demo, generative UI, and the app sheet all feed it the same shape.
- Each chart section owns its own 24-hour and 30-day toggle, so views and engagement each take both an hourly and a daily series.
- Metric values are raw numbers (the component formats 1500000 as 1.5M); preformatted strings like percentages pass through untouched, and null renders as a dash.
- Breakdown percentages are 0 to 1 fractions; rows sort by share automatically.
- The metrics row is a StatCardGrid, the same component every other summary row in the app uses. This surface is where that treatment came from; it now consumes it rather than re-stating it, so a change to the plate or the column rules reaches here too.
- The media preview letterboxes into a sticky 9:16 black box.