Stepper

"use client";

import { useState } from "react";
import { Badge, Button, Stepper, StepperItem } from "@pimolu/react";

function ControlledStepper() {
  const [step, setStep] = useState(2);
  return (
    <div className="grid gap-5 min-w-0">
      <div className="flex flex-wrap items-center gap-3 min-w-0">
        <Badge variant="primary">step {step}</Badge>
        <Button
          size="sm"
          appearance="outline"
          disabled={step <= 1}
          onClick={() => setStep((current) => current - 1)}
        >
          Back
        </Button>
        <Button
          size="sm"
          disabled={step >= 4}
          onClick={() => setStep((current) => current + 1)}
        >
          Next
        </Button>
      </div>
      <Stepper
        aria-label="Onboarding"
        activeStep={step}
        onStepChange={setStep}
        clickable
      >
        <StepperItem step={1} title="Account" description="Create an account" />
        <StepperItem step={2} title="Workspace" description="Name your workspace" />
        <StepperItem step={3} title="Team" description="Invite teammates" />
        <StepperItem step={4} title="Billing" description="Choose a plan" />
      </Stepper>
    </div>
  );
}

export function DemoExample() {
  return (<ControlledStepper />);
}