51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { useState, ReactNode } from "react";
|
|
import "./StepNavigator.css"
|
|
|
|
interface StepNavigatorProps {
|
|
totalSteps: number;
|
|
children: ReactNode[];
|
|
onFinish?: () => void;
|
|
}
|
|
|
|
export default function StepNavigator({ totalSteps, children, onFinish }: StepNavigatorProps) {
|
|
const [step, setStep] = useState(1);
|
|
|
|
const handleNext = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
e.preventDefault();
|
|
if (step < totalSteps) setStep(step + 1);
|
|
else if (onFinish) onFinish();
|
|
};
|
|
|
|
const handlePrev = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
e.preventDefault();
|
|
if (step > 1) setStep(step - 1);
|
|
};
|
|
|
|
return (
|
|
<section className="stepNavigator">
|
|
{children[step - 1]}
|
|
|
|
<div className="absoluteButton">
|
|
{step > 1 && (
|
|
<button
|
|
onClick={handlePrev}
|
|
className="button buttonSearch">
|
|
Atrás
|
|
</button>
|
|
)}
|
|
|
|
{step < totalSteps &&
|
|
<button
|
|
onClick={handleNext}
|
|
className="button buttonSearch"
|
|
>
|
|
Siguiente
|
|
</button>
|
|
}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|