20 lines
711 B
TypeScript
20 lines
711 B
TypeScript
import type { WizardStep } from "../types";
|
|
|
|
export default function Stepper({ steps, activeStep, onSelect }: { steps: WizardStep[]; activeStep: string; onSelect: (id: string) => void }) {
|
|
return (
|
|
<ol className="stepper">
|
|
{steps.map((step, index) => (
|
|
<li key={step.id} className={`step ${activeStep === step.id ? "active" : ""} step-${step.status || "todo"}`}>
|
|
<button onClick={() => onSelect(step.id)}>
|
|
<span className="step-number">{index + 1}</span>
|
|
<span>
|
|
<strong>{step.label}</strong>
|
|
{step.description && <small>{step.description}</small>}
|
|
</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
);
|
|
}
|