Spaces:
Sleeping
Sleeping
| 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-teal-500 to-teal-700" | |
| : currentStep === step.index | |
| ? "bg-gradient-to-r from-teal-600 to-blue-700" | |
| : "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-teal-500 via-teal-600 to-blue-600" | |
| : "bg-gray-300" | |
| }`} | |
| /> | |
| )} | |
| </Fragment> | |
| ))} | |
| </div> | |
| </div> | |
| ); | |
| } |