Wizard

TS

import { … } from "@fungi.computer/caps/components/wizard";

Hero

TSX

import { Wizard } from "@fungi.computer/caps/components/wizard";
import { useState } from "react";

export default function Hero() {
  const [current, setCurrent] = useState("patch");
  return (
    <Wizard
      current={current}
      onStepChange={setCurrent}
      steps={[
        { id: "patch", title: "Patch", content: "Pick a patch to log." },
        { id: "species", title: "Species", content: "Name what you found." },
        { id: "notes", title: "Notes", content: "Add any notes." },
      ]}
    />
  );
}

Validated

TSX

import { Button } from "@fungi.computer/caps/components/button";
import { Wizard } from "@fungi.computer/caps/components/wizard";
import { useState } from "react";

export default function Validated() {
  const [current, setCurrent] = useState("species");
  const [species, setSpecies] = useState("");
  return (
    <Wizard
      current={current}
      onStepChange={setCurrent}
      nextDisabled={current === "species" && species.trim() === ""}
      steps={[
        { id: "patch", title: "Patch", content: "Creek bend, east bank." },
        {
          id: "species",
          title: "Species",
          content: (
            <input
              className="input"
              aria-label="Species"
              placeholder="What did you find?"
              value={species}
              onChange={(event) => {
                setSpecies(event.target.value);
              }}
            />
          ),
        },
        {
          id: "done",
          title: "Done",
          content: `Logged: ${species || "nothing yet"}.`,
        },
      ]}
      actions={<Button size="sm">Save entry</Button>}
    />
  );
}