Load bars

"use client";
import { Avatar } from "@/components/ui/notchset/avatar";
import { LoadBars, LoadMeter } from "@/components/ui/notchset/blocks/load-bars";

const PEOPLE = [
  { id: "maya", name: "Maya", load: 13, pace: 11 },
  { id: "ruth", name: "Ruth", load: 5, pace: 5 },
  { id: "tomas", name: "Tomás", load: 8, pace: 10 },
  { id: "ines", name: "Ines", load: 3, pace: 9 },
];

export default function LoadBarsDemo() {
  return (
    <div className="flex w-full max-w-[520px] flex-col gap-5">
      <LoadBars people={PEOPLE.map((p) => ({ ...p, avatar: <Avatar name={p.name} size={22} /> }))} />
      <LoadMeter load={13} pace={11} className="max-w-[320px]" />
    </div>
  );
}