StatTile

Direction and sentiment are separate on purpose: a falling error rate goes down and is good. Children render under the value, which is where a sparkline goes.

import { Sparkline, StatTile } from '@andrewbehma/glass-ui';

Playground

StatTile.tsx

import { Sparkline, StatTile } from '@andrewbehma/glass-ui';

<div className="w-full max-w-72">
  <StatTile
    label="Monthly revenue"
    value="$48,210"
    delta={{ value: "+12.4%", direction: "up", sentiment: "good" }}
  >
    <Sparkline values={[12, 18, 15, 22, 28, 26, 34, 41]} label="Last 8 weeks" />
  </StatTile>
</div>

States

Each tile is the live component. Open one in the playground to keep tweaking it.

Good
Bad
Loading