TaskList

render() {
  const current = signal(1);
  const items = signal(plan(1, 4));
  const advance = () => {
    current.value = Math.min(current.value + 1, steps.length);
    items.value = plan(current.value, current.value < steps.length ? 0 : undefined);
  };
  return (
    <Specimens>
      <Specimen label="In progress" width="narrow">
        <TaskList items={items} />
        <ActionRow>
          <Button size="small" variant="outline" data-task-advance onClick={advance}>
            Finish current step
          </Button>
          <Button
            size="small"
            variant="quiet"
            onClick={() => {
              current.value = 1;
              items.value = plan(1, 4);
            }}
          >
            Reset
          </Button>
        </ActionRow>
      </Specimen>
      <Specimen
        label="Every state"
        note="Waiting needs someone; failed and canceled steps keep their place in the plan."
        width="narrow"
      >
        <TaskList
          title="Release checks"
          items={[
            { id: "a", label: "Run the test suite", state: "success" },
            { id: "b", label: "Approve the migration", state: "waiting" },
            { id: "c", label: "Upload the source maps", state: "error" },
            { id: "d", label: "Notify the beta channel", state: "cancelled" },
            { id: "e", label: "Tag the release", state: "queued" },
          ]}
        />
      </Specimen>
      <Specimen label="Collapsed" width="narrow">
        <TaskList items={plan(steps.length)} defaultOpen={false} />
      </Specimen>
    </Specimens>
  );
}