Stats
A few numbers side by side, as the Daily overview opens with them: each on white within its card, what it counts over the figure and what it's made of under it.
In a card
Daily overview · Mon, Oct 19
- Yesterday
- ~€420
- 8 bookings
- Today
- ~€310
- 6 bookings
import { Stat, Stats } from "@/components/shared/stats";
<Stats>
<Stat label="Yesterday" value="~€420" detail="8 bookings" />
<Stat label="Today" value="~€310" detail="6 bookings" />
</Stats>Three, and without a detail
Last week
- Bookings
- 42
- New clients
- 9
- By Okami
- 31
<Stats>
<Stat label="Bookings" value="42" />
<Stat label="New clients" value="9" />
<Stat label="By Okami" value="31" />
</Stats>Guidelines
- Two or three at most: they share the card's width in equal columns, and more stops reading at a glance on a phone.
- The figure comes formatted. An estimate says so with ~ (~€420); nothing reads plainly (€0).
- Inside a card, on the card's tint: the tiles are white, so they stand off it as fields do.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| Stats › children | ReactNode | — | The Stats, laid out in equal columns. |
| Stat › label | string | — | What it counts: "Yesterday". |
| Stat › value | string | — | The figure, formatted: "~€420". |
| Stat › detail | string | — | What it's made of: "8 bookings". Optional. |