Step Progress

import { StepProgress } from "@/components/ui/step-progress";

export default function Example() {
  return <StepProgress />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const StepProgress = forwardRef(({ className, steps = [], currentStep = 0, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center", className)} {...props}>
    {steps.map((step, i) => (
      <div key={i} className="flex flex-1 items-center">
        <div className="flex flex-col items-center">
          <div className={cn("flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold transition-colors",
            i <= currentStep ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
          )}>
            {i < currentStep ? "✓" : i + 1}
          </div>
          <span className={cn("mt-1 text-xs", i <= currentStep ? "text-foreground font-medium" : "text-muted-foreground")}>{step}</span>
        </div>
        {i < steps.length - 1 && (
          <div className={cn("mx-2 h-0.5 flex-1", i < currentStep ? "bg-primary" : "bg-muted")} />
        )}
      </div>
    ))}
  </div>
));
StepProgress.displayName = "StepProgress";

export { StepProgress };