"use client";

import {
  Button,
  Stepper,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from "@countryclub/ui-react";
import { useState } from "react";

const steps = [
  { description: "Pick a tier", title: "Membership" },
  { description: "Your details", title: "Profile" },
  { description: "Confirm & pay", title: "Payment" },
  { description: "All set", title: "Done" },
];

export default function StepperDemo() {
  const [active, setActive] = useState(2);

  return (
    <div className="flex w-full max-w-2xl flex-col gap-8">
      <Stepper value={active}>
        {steps.map((step, index) => (
          <StepperItem key={step.title} step={index + 1}>
            <StepperTrigger onClick={() => setActive(index + 1)}>
              <StepperIndicator />
              <div className="flex flex-col">
                <StepperTitle>{step.title}</StepperTitle>
                <StepperDescription className="max-sm:hidden">
                  {step.description}
                </StepperDescription>
              </div>
            </StepperTrigger>
            {index < steps.length - 1 ? <StepperSeparator /> : null}
          </StepperItem>
        ))}
      </Stepper>

      <div className="flex justify-between">
        <Button
          disabled={active === 1}
          onClick={() => setActive((a) => Math.max(1, a - 1))}
          variant="outline"
        >
          Back
        </Button>
        <Button
          disabled={active === steps.length}
          onClick={() => setActive((a) => Math.min(steps.length, a + 1))}
        >
          Next
        </Button>
      </div>
    </div>
  );
}
Stepper

Import

Default

Vertical
