78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface OnboardingStepperProps {
|
|
currentStep: number;
|
|
totalSteps: number;
|
|
steps: string[];
|
|
}
|
|
|
|
/**
|
|
* OnboardingStepper
|
|
*
|
|
* A progress indicator with a "pit limiter" vibe.
|
|
* Uses a progress line and step labels.
|
|
*/
|
|
export function OnboardingStepper({ currentStep, totalSteps, steps }: OnboardingStepperProps) {
|
|
const progress = (currentStep / totalSteps) * 100;
|
|
|
|
return (
|
|
<Stack gap={4} w="full">
|
|
<Stack w="full" h="1.5" bg="bg-iron-gray" rounded="full" overflow="hidden" position="relative">
|
|
<Stack
|
|
as={motion.div}
|
|
initial={{ width: 0 }}
|
|
animate={{ width: `${progress}%` }}
|
|
transition={{ duration: 0.5, ease: 'easeOut' }}
|
|
h="full"
|
|
bg="bg-primary-blue"
|
|
/>
|
|
</Stack>
|
|
|
|
<Stack display="flex" justify="between">
|
|
{steps.map((label, index) => {
|
|
const stepNumber = index + 1;
|
|
const isActive = stepNumber === currentStep;
|
|
const isCompleted = stepNumber < currentStep;
|
|
|
|
return (
|
|
<Stack key={label} direction="row" align="center" gap={2}>
|
|
<Stack
|
|
w="6"
|
|
h="6"
|
|
rounded="full"
|
|
display="flex"
|
|
center
|
|
border
|
|
borderColor={isActive || isCompleted ? 'border-primary-blue' : 'border-charcoal-outline'}
|
|
bg={isCompleted ? 'bg-primary-blue' : isActive ? 'bg-primary-blue/20' : 'transparent'}
|
|
transition
|
|
>
|
|
<Text
|
|
size="xs"
|
|
weight="bold"
|
|
color={isCompleted ? 'text-white' : isActive ? 'text-primary-blue' : 'text-gray-500'}
|
|
>
|
|
{stepNumber}
|
|
</Text>
|
|
</Stack>
|
|
<Text
|
|
size="sm"
|
|
weight={isActive ? 'bold' : 'medium'}
|
|
color={isActive ? 'text-white' : 'text-gray-500'}
|
|
uppercase
|
|
letterSpacing="wider"
|
|
>
|
|
{label}
|
|
</Text>
|
|
</Stack>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|