60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import { Button } from '@/ui/Button';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
interface OnboardingCTAProps {
|
|
onBack?: () => void;
|
|
onNext?: () => void;
|
|
nextLabel?: string;
|
|
backLabel?: string;
|
|
isLastStep?: boolean;
|
|
canNext?: boolean;
|
|
isLoading?: boolean;
|
|
type?: 'button' | 'submit';
|
|
}
|
|
|
|
export function OnboardingCTA({
|
|
onBack,
|
|
onNext,
|
|
nextLabel = 'Continue',
|
|
backLabel = 'Back',
|
|
isLastStep = false,
|
|
canNext = true,
|
|
isLoading = false,
|
|
type = 'button',
|
|
}: OnboardingCTAProps) {
|
|
return (
|
|
<Stack direction="row" justify="between" mt={8} gap={4}>
|
|
{onBack ? (
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
onClick={onBack}
|
|
disabled={isLoading}
|
|
className="px-8"
|
|
>
|
|
{backLabel}
|
|
</Button>
|
|
) : (
|
|
<div />
|
|
)}
|
|
|
|
<Button
|
|
type={type}
|
|
variant="primary"
|
|
onClick={onNext}
|
|
disabled={isLoading || !canNext}
|
|
className="px-8 min-w-[140px]"
|
|
>
|
|
{isLoading ? (
|
|
<Stack direction="row" gap={2} align="center">
|
|
<span className="animate-spin">⟳</span>
|
|
<span>Processing...</span>
|
|
</Stack>
|
|
) : (
|
|
isLastStep ? 'Complete Setup' : nextLabel
|
|
)}
|
|
</Button>
|
|
</Stack>
|
|
);
|
|
}
|