Stepper

import { Stepper } from "@compa11y/react";

import { useState } from "react";
import { Stepper, Button } from "@compa11y/react";

function CheckoutStepper() {
  const [step, setStep] = useState(1);

  const steps = [
    { id: "cart", label: "Cart", status: "complete" as const },
    { id: "shipping", label: "Shipping", status: "active" as const },
    { id: "payment", label: "Payment", status: "pending" as const },
    { id: "confirm", label: "Confirmation", status: "pending" as const },
  ];

  return (
    <div>
      <Stepper steps={steps} currentStep={step} clickableSteps />
      <div style={{ display: "flex", gap: "8px", marginTop: "24px" }}>
        <Button variant="outline" onClick={() => setStep(s => s - 1)} disabled={step === 0}>
          Back
        </Button>
        <Button onClick={() => setStep(s => s + 1)} disabled={step === steps.length - 1}>
          Continue
        </Button>
      </div>
    </div>
  );
}