70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Check } from "lucide-react";
|
|
import { ONBOARDING_STEPS } from "@/types/onboarding";
|
|
|
|
interface OnboardingProgressProps {
|
|
currentStep: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function OnboardingProgress({
|
|
currentStep,
|
|
className = "",
|
|
}: OnboardingProgressProps) {
|
|
return (
|
|
<div className={`w-full ${className}`}>
|
|
<div className="flex items-center justify-between">
|
|
{ONBOARDING_STEPS.map((step, index) => {
|
|
const isCompleted = step.id < currentStep;
|
|
const isCurrent = step.id === currentStep;
|
|
|
|
return (
|
|
<div key={step.id} className="flex flex-1 items-center">
|
|
<div className="flex flex-col items-center">
|
|
<div
|
|
className={`flex h-8 w-8 items-center justify-center rounded-full border-2 transition-all ${
|
|
isCompleted
|
|
? "border-primary bg-primary text-primary-foreground"
|
|
: isCurrent
|
|
? "border-primary bg-primary/10 text-primary ring-2 ring-primary/20"
|
|
: "border-muted-foreground/30 bg-muted/50 text-muted-foreground"
|
|
}`}
|
|
>
|
|
{isCompleted ? (
|
|
<Check className="h-4 w-4" />
|
|
) : (
|
|
<span className="text-sm font-medium">{step.id + 1}</span>
|
|
)}
|
|
</div>
|
|
<span
|
|
className={`mt-2 text-xs font-medium whitespace-nowrap hidden sm:block ${
|
|
isCurrent
|
|
? "text-primary"
|
|
: isCompleted
|
|
? "text-foreground"
|
|
: "text-muted-foreground"
|
|
}`}
|
|
>
|
|
{step.title}
|
|
</span>
|
|
</div>
|
|
|
|
{index < ONBOARDING_STEPS.length - 1 && (
|
|
<div className="mx-2 h-0.5 flex-1 bg-muted-foreground/20">
|
|
<div
|
|
className={`h-full transition-all ${
|
|
isCompleted ? "bg-primary" : "bg-transparent"
|
|
}`}
|
|
style={{ width: isCompleted ? "100%" : "0%" }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|