Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 948x 948x 2844x 2844x 2844x 2844x | import { Check } from "lucide-react";
interface OnboardingProgressProps {
currentStep: number;
totalSteps: number;
}
export function OnboardingProgress({
currentStep,
totalSteps,
}: OnboardingProgressProps) {
const progress = ((currentStep - 1) / (totalSteps - 1)) * 100;
return (
<div className="space-y-2">
{/* Progress bar */}
<div className="h-2 bg-background-muted rounded-full overflow-hidden">
<div
className="h-full bg-primary-600 transition-all duration-300 ease-out rounded-full"
style={{ width: `${progress}%` }}
/>
</div>
{/* Step indicators */}
<div className="flex justify-between">
{Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => {
const isCompleted = step < currentStep;
const isCurrent = step === currentStep;
return (
<div
key={step}
className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-medium transition-all ${
isCompleted
? "bg-primary-600 text-foreground-inverse"
: isCurrent
? "bg-primary-100 text-primary-700 ring-2 ring-primary-600"
: "bg-background-muted text-foreground-subtle"
}`}
>
{isCompleted ? <Check className="h-3 w-3" /> : step}
</div>
);
})}
</div>
</div>
);
}
|