67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface Step {
|
|
label: string;
|
|
description?: string;
|
|
}
|
|
|
|
export interface StepProgressProps {
|
|
steps: Step[];
|
|
currentStep: number;
|
|
}
|
|
|
|
export const StepProgress: React.FC<StepProgressProps> = ({ steps, currentStep }) => {
|
|
return (
|
|
<div className="w-full">
|
|
<div className="flex items-center justify-between">
|
|
{steps.map((step, index) => {
|
|
const isActive = index === currentStep;
|
|
const isCompleted = index < currentStep;
|
|
|
|
return (
|
|
<div key={index} className="flex-1 flex items-center">
|
|
{/* Step circle */}
|
|
<div className="relative flex items-center justify-center">
|
|
<div
|
|
className={`w-10 h-10 rounded-full flex items-center justify-center font-semibold transition-all ${
|
|
isActive
|
|
? 'bg-[#667eea] text-white ring-4 ring-[#667eea] ring-opacity-20'
|
|
: isCompleted
|
|
? 'bg-green-500 text-white'
|
|
: 'bg-gray-200 text-gray-500'
|
|
}`}
|
|
>
|
|
{isCompleted ? '✓' : index + 1}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step label */}
|
|
<div className="ml-3 flex-1">
|
|
<p
|
|
className={`text-sm font-medium ${
|
|
isActive ? 'text-[#667eea]' : isCompleted ? 'text-green-600' : 'text-gray-500'
|
|
}`}
|
|
>
|
|
{step.label}
|
|
</p>
|
|
{step.description && (
|
|
<p className="text-xs text-gray-500 mt-0.5">{step.description}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Connector line */}
|
|
{index < steps.length - 1 && (
|
|
<div
|
|
className={`w-full h-0.5 mx-2 ${
|
|
isCompleted ? 'bg-green-500' : 'bg-gray-200'
|
|
}`}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|