Segmented Bar

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

export default function SegmentedBarDemo() {
  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="w-full max-w-[520px] text-on-surface">
      <SegmentedBar data={mix} scale="categorical" />
    </div>
  );
}