49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { Loader2 } from "lucide-react";
|
|
import type { BackgroundProgress } from "../../shared/types";
|
|
|
|
interface Props {
|
|
progress: BackgroundProgress;
|
|
compact?: boolean;
|
|
}
|
|
|
|
function pct(processed: number, total: number): number {
|
|
if (total <= 0) return 0;
|
|
return Math.min(100, Math.round((processed / total) * 100));
|
|
}
|
|
|
|
export function BackgroundProgressBanner({ progress, compact = false }: Props) {
|
|
const percent = pct(progress.processed, progress.total);
|
|
const moduleLabel =
|
|
progress.module === "counting" ? "Conteo"
|
|
: progress.module === "cleaning" ? "Limpieza"
|
|
: "Extracción";
|
|
|
|
return (
|
|
<div className={`bg-progress-banner${compact ? " bg-progress-banner--compact" : ""}`}>
|
|
<div className="bg-progress-banner-header">
|
|
<Loader2 size={compact ? 14 : 16} className="spin" />
|
|
<span className="bg-progress-banner-title">
|
|
{moduleLabel} en curso — {progress.label}
|
|
</span>
|
|
<span className="bg-progress-banner-count">
|
|
<strong>{progress.processed}</strong> / {progress.total}
|
|
{progress.failed > 0 && (
|
|
<span className="bg-progress-banner-failed"> · {progress.failed} error(es)</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div className="wiz-progress-track bg-progress-banner-track">
|
|
<div
|
|
className="wiz-progress-fill"
|
|
style={{ width: `${percent}%`, transition: "width 0.3s ease" }}
|
|
/>
|
|
</div>
|
|
{!compact && progress.currentFile && (
|
|
<p className="bg-progress-banner-file" title={progress.currentFile}>
|
|
{progress.currentFile}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|