61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
|
|
interface OnboardingPrimaryActionsProps {
|
|
onBack?: () => void;
|
|
onNext?: () => void;
|
|
nextLabel?: string;
|
|
isLastStep?: boolean;
|
|
canNext?: boolean;
|
|
isLoading?: boolean;
|
|
type?: 'button' | 'submit';
|
|
}
|
|
|
|
/**
|
|
* OnboardingPrimaryActions
|
|
*
|
|
* Semantic component for the main navigation actions in the onboarding flow.
|
|
*/
|
|
export function OnboardingPrimaryActions({
|
|
onBack,
|
|
onNext,
|
|
nextLabel = 'Continue',
|
|
isLastStep = false,
|
|
canNext = true,
|
|
isLoading = false,
|
|
type = 'button',
|
|
}: OnboardingPrimaryActionsProps) {
|
|
return (
|
|
<Stack direction="row" justify="between" mt={8} gap={4}>
|
|
{onBack ? (
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
onClick={onBack}
|
|
disabled={isLoading}
|
|
icon={<Icon icon={ChevronLeft} size={4} />}
|
|
>
|
|
Back
|
|
</Button>
|
|
) : (
|
|
<Stack />
|
|
)}
|
|
|
|
<Button
|
|
type={type}
|
|
variant="primary"
|
|
onClick={onNext}
|
|
disabled={isLoading || !canNext}
|
|
w="40"
|
|
>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
{isLoading ? 'Processing...' : isLastStep ? 'Complete Setup' : nextLabel}
|
|
{!isLoading && (isLastStep ? <Icon icon={Check} size={4} /> : <Icon icon={ChevronRight} size={4} />)}
|
|
</Stack>
|
|
</Button>
|
|
</Stack>
|
|
);
|
|
}
|