24 lines
899 B
TypeScript
24 lines
899 B
TypeScript
import type { OnboardingStep } from '@/routes/onboarding/route';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
interface VerticalStepperProps {
|
|
steps: Array<OnboardingStep>;
|
|
currentStepIndex: number;
|
|
};
|
|
|
|
export function Stepper({ steps, currentStepIndex }: VerticalStepperProps) {
|
|
return (
|
|
<div className="max-w-md mx-auto">
|
|
{steps.map((step, index) => (
|
|
<div
|
|
className={twMerge('after:transition-all after:duration-300 after:text-brand transition-all duration-300 relative flex items-center cursor-pointer py-2 pl-4 font-medium text-gray-400 text-base partial-leftline-0% data-active:text-white data-active:text-lg data-active:partial-leftline-100% data-complete:partial-leftline-100%')}
|
|
data-active={index === currentStepIndex || null}
|
|
data-complete={index < currentStepIndex || null}
|
|
key={index}
|
|
>
|
|
<span>{step.title}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|