81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { ChevronLeft, ChevronRight, Save } from 'lucide-react'
|
|
|
|
interface StepperNavigationProps {
|
|
currentStep: number
|
|
totalSteps: number
|
|
isSubmitting: boolean
|
|
isEditMode: boolean
|
|
onPrevious: () => void
|
|
onNext: () => void
|
|
onSubmit: () => void
|
|
}
|
|
|
|
const StepperNavigation: React.FC<StepperNavigationProps> = ({
|
|
currentStep,
|
|
totalSteps,
|
|
isSubmitting,
|
|
isEditMode,
|
|
onPrevious,
|
|
onNext,
|
|
onSubmit,
|
|
}) => {
|
|
return (
|
|
<div className="bg-gray-800 px-8 py-6 border-t border-gray-700">
|
|
<div className="flex justify-between items-center">
|
|
<Button
|
|
variant="outline"
|
|
disabled={currentStep === 0}
|
|
onClick={onPrevious}
|
|
className="flex items-center gap-2 border-gray-700 text-gray-300 hover:bg-gray-700 hover:text-white disabled:opacity-50"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
Previous
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-2 text-sm text-gray-400">
|
|
<span>Step {currentStep + 1} of {totalSteps}</span>
|
|
</div>
|
|
|
|
{currentStep < totalSteps - 2 ? (
|
|
<Button
|
|
onClick={onNext}
|
|
className="flex items-center gap-2 bg-[#9B2335] hover:bg-[#9B2335]/90 shadow-lg"
|
|
>
|
|
Next
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Button>
|
|
) : currentStep === totalSteps - 2 ? (
|
|
<Button
|
|
onClick={onNext}
|
|
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 shadow-lg"
|
|
>
|
|
Review
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
onClick={onSubmit}
|
|
disabled={isSubmitting}
|
|
className="flex items-center gap-2 bg-green-600 hover:bg-green-700 shadow-lg"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
|
Saving...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save className="w-4 h-4" />
|
|
{isEditMode ? "Update Record" : "Submit Form"}
|
|
</>
|
|
)}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default StepperNavigation |