61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
type StepIndicatorProps = {
|
|
current: number;
|
|
total: number;
|
|
isComplete: boolean;
|
|
};
|
|
|
|
export default function StepIndicator({
|
|
current,
|
|
total,
|
|
isComplete
|
|
}: StepIndicatorProps) {
|
|
const progress = Math.round(((current + 1) / total) * 100);
|
|
|
|
return (
|
|
<div className="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
|
|
Progresso
|
|
</p>
|
|
<p className="text-2xl font-semibold text-slate-900">
|
|
{isComplete ? "Concluído" : `Etapa ${current + 1} de ${total}`}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">
|
|
Avanço
|
|
</p>
|
|
<p className="text-lg font-semibold text-slate-900">
|
|
{isComplete ? "100%" : `${progress}%`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-slate-200/70">
|
|
<div
|
|
className="h-full rounded-full bg-gradient-to-r from-slate-900 via-slate-700 to-slate-500 transition-all duration-500"
|
|
style={{ width: `${isComplete ? 100 : progress}%` }}
|
|
/>
|
|
</div>
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{Array.from({ length: total }).map((_, index) => {
|
|
const isActive = index === current && !isComplete;
|
|
const isDone = isComplete || index < current;
|
|
return (
|
|
<span
|
|
key={`step-${index}`}
|
|
className={`h-2.5 w-2.5 rounded-full transition-all duration-300 ${
|
|
isDone
|
|
? "bg-slate-900"
|
|
: isActive
|
|
? "bg-amber-400"
|
|
: "bg-slate-200"
|
|
}`}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|