Spaces:
Configuration error
Configuration error
File size: 2,743 Bytes
bb8c446 | 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 50 51 52 |
import React from 'react';
import { CheckIcon } from './icons/CheckIcon';
interface StepIndicatorProps {
steps: string[];
currentStep: number;
}
export const StepIndicator: React.FC<StepIndicatorProps> = ({ steps, currentStep }) => {
return (
<nav aria-label="Progress">
<ol role="list" className="flex items-center">
{steps.map((step, stepIdx) => (
<li key={step} className={`relative ${stepIdx !== steps.length - 1 ? 'pr-8 sm:pr-20' : ''}`}>
{stepIdx < currentStep ? (
<>
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="h-0.5 w-full bg-brand-secondary" />
</div>
<div className="relative flex h-8 w-8 items-center justify-center rounded-full bg-brand-secondary">
<CheckIcon className="h-5 w-5 text-white" />
</div>
<span className="absolute top-10 -left-2 w-max text-xs text-gray-300">{step}</span>
</>
) : stepIdx === currentStep ? (
<>
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="h-0.5 w-full bg-gray-700" />
</div>
<div className="relative flex h-8 w-8 items-center justify-center rounded-full border-2 border-brand-secondary bg-gray-800">
<span className="h-2.5 w-2.5 rounded-full bg-brand-secondary" />
</div>
<span className="absolute top-10 -left-2 w-max text-xs text-brand-secondary font-semibold">{step}</span>
</>
) : (
<>
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="h-0.5 w-full bg-gray-700" />
</div>
<div className="relative flex h-8 w-8 items-center justify-center rounded-full border-2 border-gray-600 bg-gray-800">
</div>
<span className="absolute top-10 -left-2 w-max text-xs text-gray-500">{step}</span>
</>
)}
</li>
))}
</ol>
</nav>
);
};
|