46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { Check } from "lucide-react";
|
|
|
|
export type ExtractionStep = 1 | 2 | 3 | 4;
|
|
|
|
const STEPS: Array<{ id: ExtractionStep; label: string }> = [
|
|
{ id: 1, label: "Carpeta" },
|
|
{ id: 2, label: "Descubrir" },
|
|
{ id: 3, label: "Seleccionar" },
|
|
{ id: 4, label: "Ejecutar" },
|
|
];
|
|
|
|
interface ExtractionStepperProps {
|
|
current: ExtractionStep;
|
|
maxReached: ExtractionStep;
|
|
onStepClick?: (step: ExtractionStep) => void;
|
|
}
|
|
|
|
export function ExtractionStepper({ current, maxReached, onStepClick }: ExtractionStepperProps) {
|
|
return (
|
|
<nav className="stepper" aria-label="Pasos de extraccion">
|
|
{STEPS.map((step, index) => {
|
|
const isDone = step.id < current;
|
|
const isActive = step.id === current;
|
|
const isClickable = step.id <= maxReached && !isActive;
|
|
const state = isDone ? "done" : isActive ? "active" : step.id <= maxReached ? "available" : "todo";
|
|
|
|
return (
|
|
<div className="stepper-item" key={step.id}>
|
|
<button
|
|
type="button"
|
|
className={`stepper-dot ${state}`}
|
|
disabled={!isClickable}
|
|
onClick={() => isClickable && onStepClick?.(step.id)}
|
|
aria-current={isActive ? "step" : undefined}
|
|
>
|
|
{isDone ? <Check size={14} strokeWidth={3} /> : step.id}
|
|
</button>
|
|
<span className={`stepper-label ${state}`}>{step.label}</span>
|
|
{index < STEPS.length - 1 && <div className={`stepper-connector ${isDone ? "done" : ""}`} />}
|
|
</div>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|