50 lines
2.3 KiB
TypeScript
50 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
|
|
interface StepIndicatorProps {
|
|
currentStep: number;
|
|
highestStep: number;
|
|
onStepClick: (step: number) => void;
|
|
t: {
|
|
title: string;
|
|
steps: string[];
|
|
}
|
|
}
|
|
|
|
const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep, highestStep, onStepClick, t }) => {
|
|
|
|
const steps = t.steps.map((name, index) => ({ id: index + 1, name }));
|
|
|
|
return (
|
|
<div className="bg-light-secondary dark:bg-brand-secondary p-4 rounded-lg shadow-md border border-light-accent dark:border-brand-accent">
|
|
<h3 className="font-bold text-lg mb-4">{t.title}</h3>
|
|
<ol className="space-y-3">
|
|
{steps.map((step) => {
|
|
const isCompleted = step.id < currentStep;
|
|
const isActive = step.id === currentStep;
|
|
const isClickable = step.id <= highestStep;
|
|
|
|
return (
|
|
<li
|
|
key={step.id}
|
|
className={`flex items-center p-1 rounded-md transition-colors ${isClickable ? 'cursor-pointer hover:bg-light-accent dark:hover:bg-brand-accent' : 'cursor-default'}`}
|
|
onClick={() => isClickable && onStepClick(step.id)}
|
|
>
|
|
<span className={`flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full mr-3 text-sm font-bold ${
|
|
isCompleted ? 'bg-green-500 text-white' :
|
|
isActive ? 'bg-brand-highlight text-white ring-2 ring-offset-2 ring-offset-light-secondary dark:ring-offset-brand-secondary ring-brand-highlight' :
|
|
'bg-light-accent dark:bg-brand-accent text-light-text dark:text-brand-text'
|
|
}`}>
|
|
{isCompleted ? '✓' : step.id}
|
|
</span>
|
|
<span className={`font-medium ${isActive ? 'text-light-text dark:text-white' : 'text-light-subtle dark:text-brand-light'}`}>
|
|
{step.name}
|
|
</span>
|
|
</li>
|
|
)
|
|
})}
|
|
</ol>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StepIndicator; |