Sparkline

import { Sparkline } from '@six-vallees/ui-react';

const rows = [
  { label: 'Revenue', value: '$48.2k', data: [4, 6, 5, 8, 7, 10, 9, 12], tone: 'text-chart-ink' },
  { label: 'Sessions', value: '12,908', data: [10, 9, 11, 8, 9, 7, 8, 6], tone: 'text-chart-ink' },
  { label: 'Signups', value: '486', data: [3, 4, 4, 5, 6, 6, 7, 8], tone: 'text-on-surface' },
  { label: 'Churn', value: '1.2%', data: [6, 5, 6, 4, 5, 4, 4, 3], tone: 'text-chart-ink' },
];

export default function SparklineDemo() {
  return (
    <div className="w-full max-w-[460px] divide-y divide-outline text-on-surface">
      {rows.map((r) => (
        <div className="flex items-center gap-6 py-3">
          <span className="w-24 text-[14px] text-on-surface-variant">{r.label}</span>
          <Sparkline data={r.data} width={120} height={26} type="area" className={r.tone} />
          <span className="ml-auto text-[15px] font-medium tabular-nums">{r.value}</span>
        </div>
      ))}
    </div>
  );
}