Segmented Bar

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

export default function SegmentedBarDemo() {
  // Grayscale by default: the active part is ink, the rest recede to a muted tint (with a keyline).
  const share = [
    { label: 'Direct', value: 42, active: true },
    { label: 'Search', value: 28 },
    { label: 'Social', value: 18 },
    { label: 'Referral', value: 12 },
  ];
  // Categorical is opt-in, for genuinely unordered categories (capped at 4).
  const mix = [
    { label: 'Idle', value: 10 },
    { label: 'Queue', value: 35.5 },
    { label: 'Processing', value: 45, active: true },
    { label: 'Error', value: 9.5 },
  ];
  return (
    <div className="flex w-full max-w-[520px] flex-col gap-8 text-on-surface">
      <div>
        <p className="mb-3 sv-body-sm text-on-surface-variant">Grayscale by default</p>
        <SegmentedBar data={share} />
      </div>
      <div>
        <p className="mb-3 sv-body-sm text-on-surface-variant">Categorical (opt-in, ≤ 4)</p>
        <SegmentedBar data={mix} scale="categorical" />
      </div>
    </div>
  );
}