Components / Live Post Card
Live Post Card
A posted piece of content with its live performance: 9:16 media beside a primary stat, a secondary stat list, and a platform/username/date footer. The card for Live Posts grids (social, UGC) and Elle’s generated post lists.
import { LivePostCard, type LivePostCardStat } from '@layers/ui/live-post-card'Rendered stock
House rules
- Media hover behavior is built in: videos play on hover, multi-image posts auto-advance as a slideshow; don’t add per-consumer hover handlers.
- Pass index so lazy loading staggers the grid reveal (useLazyMedia drives it).
- The media letterbox is the --media-backdrop token; the hover glow comes from content-card.css (self-imported).
- onClick makes the whole card interactive with button semantics; leave it off for static displays.
- A stat you do not have is never a 0. Pass the placeholder glyph for the individual numbers that are missing, and set statsPending={true} when EVERY number is absent so the panel states that instead of rendering a scoreboard of dashes.
- primaryTooltip is for a DERIVED headline only. A raw count explains itself; a multiple like "31.8x" is a claim about two numbers the card never shows, so the tooltip states them. Never put one on a plain count: a tooltip on "Views" is noise.
- note says what cannot be done with this post, so the card can stay on the grid instead of being dropped from it. A grid that silently omits what it cannot act on teaches the reader that the post does not exist. One sentence, in the footer, in warning ink; leave it off when there is nothing to qualify.