73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import type { OnboardingStep } from '@/routes/onboarding/route';
|
|
import { useMatchRoute } from '@tanstack/react-router';
|
|
|
|
interface VerticalStepperProps {
|
|
steps: Array<OnboardingStep>;
|
|
linearSteps: Array<Omit<OnboardingStep, 'subSteps'>>;
|
|
};
|
|
|
|
export function Stepper({ steps, linearSteps }: VerticalStepperProps) {
|
|
const matchRoute = useMatchRoute();
|
|
|
|
const currentLinearIndex = linearSteps.findIndex(step =>
|
|
matchRoute({ to: step.path }));
|
|
|
|
const progressHeight = currentLinearIndex >= 0 ? `${(currentLinearIndex / (linearSteps.length - 1)) * 100}%` : '0%';
|
|
|
|
// const nextStep = () => {
|
|
// if (currentStep < steps.length - 1)
|
|
// setCurrentStep(currentStep + 1);
|
|
// };
|
|
|
|
// const prevStep = () => {
|
|
// if (currentStep > 0)
|
|
// setCurrentStep(currentStep - 1);
|
|
// };
|
|
|
|
// const goToStep = (stepIndex: number) => {
|
|
// setCurrentStep(stepIndex);
|
|
// };
|
|
|
|
return (
|
|
<div>
|
|
<div className="max-w-md mx-auto">
|
|
<div className="relative">
|
|
<div className="absolute left-4 top-0 w-0.5 h-full bg-gray-600"></div>
|
|
|
|
<div
|
|
className="absolute left-4 top-0 w-0.5 bg-brand transition-all duration-500 ease-in-out"
|
|
style={{
|
|
height: `${progressHeight}`,
|
|
}}
|
|
>
|
|
</div>
|
|
|
|
<ul className="relative space-y-4">
|
|
{steps.map((step, index) => (
|
|
<li
|
|
className="relative flex items-center cursor-pointer group"
|
|
key={index}
|
|
// onClick={() => goToStep(index)}
|
|
>
|
|
<div className="ml-8">
|
|
<span className={`
|
|
transition-all duration-300 font-medium
|
|
${index === currentLinearIndex
|
|
? 'text-white text-lg'
|
|
: index < currentLinearIndex
|
|
? ' text-base'
|
|
: 'text-gray-400 text-base'
|
|
}
|
|
`}
|
|
>
|
|
{step.title}
|
|
</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|