55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
interface Props {
|
|
currentStep: number
|
|
isSubmitting: boolean
|
|
isEditMode: boolean
|
|
titleEmpty: boolean
|
|
onBack: () => void
|
|
onNext: () => void
|
|
onSubmit: () => void
|
|
}
|
|
|
|
export function NavigationButtons({ currentStep, isSubmitting, isEditMode, titleEmpty, onBack, onNext, onSubmit }: Props) {
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<button
|
|
onClick={onBack}
|
|
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
{currentStep === 1 ? 'Abbrechen' : 'Zurueck'}
|
|
</button>
|
|
|
|
{currentStep < 8 ? (
|
|
<button
|
|
onClick={onNext}
|
|
disabled={currentStep === 1 && titleEmpty}
|
|
className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
|
>
|
|
Weiter
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={onSubmit}
|
|
disabled={isSubmitting || titleEmpty}
|
|
className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 flex items-center gap-2"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
Bewerte...
|
|
</>
|
|
) : (
|
|
isEditMode ? 'Speichern & neu bewerten' : 'Assessment starten'
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|