54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
|
|
import React from 'react';
|
|
import { AppStep } from '../types';
|
|
|
|
interface StepIndicatorProps {
|
|
currentStep: AppStep;
|
|
}
|
|
|
|
const steps = [
|
|
{ id: AppStep.Upload, title: 'Upload' },
|
|
{ id: AppStep.Segment, title: 'Segment Subjects'},
|
|
{ id: AppStep.Prompt, title: 'Create Prompt' },
|
|
{ id: AppStep.Result, title: 'Generate & Refine' },
|
|
];
|
|
|
|
const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep }) => {
|
|
return (
|
|
<div className="w-full">
|
|
<div className="flex items-center justify-between md:justify-center">
|
|
{steps.map((step, index) => {
|
|
const isActive = currentStep === step.id;
|
|
const isCompleted = currentStep > step.id;
|
|
|
|
return (
|
|
<React.Fragment key={step.id}>
|
|
<div className="flex items-center flex-col sm:flex-row text-center">
|
|
<div
|
|
className={`flex items-center justify-center w-10 h-10 rounded-full transition-all duration-300 ${
|
|
isActive ? 'bg-purple-600 scale-110' : isCompleted ? 'bg-green-600' : 'bg-gray-700'
|
|
}`}
|
|
>
|
|
<span className={`font-bold ${isActive || isCompleted ? 'text-white' : 'text-gray-400'}`}>
|
|
{isCompleted ? (
|
|
<svg xmlns="http://www.w.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
) : step.id}
|
|
</span>
|
|
</div>
|
|
<p className={`mt-2 sm:mt-0 sm:ml-3 font-semibold text-xs sm:text-sm ${isActive ? 'text-purple-300' : 'text-gray-500'}`}>{step.title}</p>
|
|
</div>
|
|
{index < steps.length - 1 && (
|
|
<div className={`flex-auto border-t-2 transition-colors duration-300 mx-2 sm:mx-4 w-4 sm:w-auto ${isCompleted ? 'border-green-600' : 'border-gray-700'}`}></div>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StepIndicator;
|