Sparkline

import { Sparkline } from '@arbol-ai/ui/charts';

<div className="grid max-w-xl gap-4 sm:grid-cols-2">
  <div className="rounded-card border p-4">
    <p className="text-muted-foreground text-xs">Contacts reached</p>
    <p className="font-heading text-2xl font-semibold tabular-nums">2,674</p>
    <Sparkline
      aria-label="Contacts reached, last 14 days"
      className="mt-2"
      values={[182, 205, 197, 240, 228, 96, 74, 210, 236, 251, 244, 262, 118, 131]}
    />
  </div>
  <div className="rounded-card border p-4">
    <p className="text-muted-foreground text-xs">Failed calls</p>
    <p className="font-heading text-2xl font-semibold tabular-nums">38</p>
    <Sparkline
      aria-label="Failed calls, last 14 days"
      className="mt-2"
      color="chart-negative"
      values={[2, 4, 1, 3, 5, 2, 1, 4, 3, null, 2, 6, 2, 3]}
    />
  </div>
</div>