Spaces:
Sleeping
Sleeping
File size: 2,049 Bytes
bf5da6b |
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 53 54 55 56 57 58 59 60 61 62 |
import { Fragment } from "react";
import { CheckIcon, FileTextIcon } from "lucide-react";
interface ProgressBarProps {
currentStep: number;
}
export function ProgressBar({ currentStep }: ProgressBarProps) {
const steps = [
{ label: "Upload", index: 0 },
{ label: "Analyze", index: 1 },
{ label: "Report", index: 2 },
];
return (
<div className="bg-white px-8 py-6 border-b border-gray-200">
<div className="max-w-2xl mx-auto flex items-center justify-center">
{steps.map((step, index) => (
<Fragment key={step.label}>
<div className="flex flex-col items-center">
{/* Step circle */}
<div
className={`w-12 h-12 rounded-full flex items-center justify-center text-white font-semibold transition-all duration-300 ${
currentStep > step.index
? "bg-gradient-to-r from-blue-800 to-teal-600"
: currentStep === step.index
? "bg-gradient-to-r from-blue-600 to-teal-500"
: "bg-gray-300 text-gray-600"
}`}
>
{currentStep > step.index ? (
<CheckIcon className="w-6 h-6" />
) : step.index === 2 ? (
<FileTextIcon className="w-6 h-6" />
) : (
<span>{index + 1}</span>
)}
</div>
{/* Label */}
<span className="mt-2 text-sm font-medium text-gray-700">
{step.label}
</span>
</div>
{/* Connecting line */}
{index < steps.length - 1 && (
<div
className={`h-1 w-32 mx-4 rounded-full transition-all duration-300 ${
currentStep > step.index
? "bg-gradient-to-r from-blue-800 to-teal-600"
: "bg-gray-300"
}`}
/>
)}
</Fragment>
))}
</div>
</div>
);
}
|