restructuring layout

2025-09-26 16:56:07 -06:00
parent dce377b586
commit 3bd6d6b7c2
64 changed files with 187 additions and 195 deletions
@@ -0,0 +1,12 @@
+.stepNavigator {
+  position: relative;
+  width: 100%;
+  max-width: 600px;
+  margin-top: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  background-color: #f9fafb;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}
@@ -0,0 +1,50 @@
+'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>
+    );
+}