Untitled
unknown
plain_text
5 months ago
2.4 kB
3
Indexable
import React from 'react'; import OwnerInformationForm from './Form_Vari/Owner_Information'; // Importa il modulo Owner Information import PetInformationForm from './Form_Vari/Pet_Information'; import ClinicInformationForm from './Form_Vari/Clinic_Information'; interface FormDatiProps { currentStep: number; setCurrentStep: React.Dispatch<React.SetStateAction<number>>; } const FormDati: React.FC<FormDatiProps> = ({ currentStep, setCurrentStep }) => { const handleNextStep = (e: React.FormEvent) => { e.preventDefault(); setCurrentStep(Math.min(4, currentStep + 1)); // Aggiungi il passo finale }; const handleBackStep = (e: React.FormEvent) => { e.preventDefault(); if (currentStep > 1) { setCurrentStep(currentStep - 1); // Torna al passo precedente } }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); alert("Dati inviati!"); // Funzione di invio }; return ( <div> {/* Mostra il modulo in base al passo corrente */} {currentStep === 1 && <OwnerInformationForm />} {currentStep === 2 && <PetInformationForm />} {currentStep === 3 && <ClinicInformationForm />} {/* Qui puoi aggiungere altri componenti come PetInformationForm per altri passi */} {/* Bottoni per navigare tra i passi */} <div className="mt-6 flex justify-end gap-4 w-full"> {/* Bottone Back */} {currentStep > 1 && ( <button onClick={handleBackStep} className="px-12 py-2 bg-gray-300 rounded-lg hover:bg-gray-400 text-sm shadow-lg" > Back </button> )} {/* Bottone Next */} {currentStep < 4 && ( <button onClick={handleNextStep} className="px-12 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 text-sm shadow-lg" > Next </button> )} {/* Bottone Invia quando siamo all'ultimo passo */} {currentStep === 4 && ( <button onClick={handleSubmit} className="px-12 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 text-sm shadow-lg" > Invia </button> )} </div> </div> ); }; export default FormDati;
Editor is loading...
Leave a Comment