STRATA

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 grid steps from one to three columns by its own container width, and the media preview letterboxes into a sticky 9:16 black box.