Spaces:
Sleeping
Sleeping
| import { CheckCircle2, Loader2 } from "lucide-react"; | |
| const STEPS = [ | |
| { id: 1, label: "Template" }, | |
| { id: 2, label: "Recipient" }, | |
| { id: 3, label: "Generate" }, | |
| { id: 4, label: "Review" }, | |
| { id: 5, label: "Sent" }, | |
| ]; | |
| export default function StepIndicator({ currentStep, loading }) { | |
| return ( | |
| <div className="flex items-center justify-center gap-1"> | |
| {STEPS.map((step, i) => { | |
| const isActive = step.id === currentStep; | |
| const isDone = step.id < currentStep; | |
| const isLoading = isActive && loading; | |
| return ( | |
| <div key={step.id} className="flex items-center"> | |
| <div | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] font-semibold tracking-wide transition-all duration-300 ${isDone | |
| ? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border border-emerald-500/20" | |
| : isActive | |
| ? "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-500/20" | |
| : "text-[var(--c-text-muted)] border border-transparent" | |
| }`} | |
| > | |
| {isDone ? ( | |
| <CheckCircle2 size={10} className="text-emerald-600 dark:text-emerald-400" /> | |
| ) : isLoading ? ( | |
| <Loader2 size={10} className="animate-spin" /> | |
| ) : ( | |
| <span className={`w-3.5 h-3.5 flex items-center justify-center rounded-full text-[8px] font-bold ${isActive ? "bg-indigo-500 text-white" : "bg-gray-200 dark:bg-white/10 text-gray-500 dark:text-[#5a5a72]" | |
| }`}> | |
| {step.id} | |
| </span> | |
| )} | |
| {step.label} | |
| </div> | |
| {i < STEPS.length - 1 && ( | |
| <div className={`w-5 h-px mx-0.5 transition-colors duration-300 ${isDone ? "bg-emerald-500/30" : "bg-gray-200 dark:bg-white/[0.06]" | |
| }`} /> | |
| )} | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| ); | |
| } | |