44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import fileProgressStyles from "~/styles/components/file-progress.css?url";
|
|
|
|
interface FileProgressProps {
|
|
fileName: string;
|
|
fileSize?: string;
|
|
progress: number;
|
|
speed?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function links() {
|
|
return [{ rel: "stylesheet", href: fileProgressStyles }];
|
|
}
|
|
|
|
export function FileProgress({
|
|
fileName,
|
|
fileSize,
|
|
progress,
|
|
speed = "0KB/s",
|
|
className = ""
|
|
}: FileProgressProps) {
|
|
return (
|
|
<div className={`progress-container ${className}`}>
|
|
<div className="mb-2 flex justify-between items-center">
|
|
<span className="font-medium">{fileName}</span>
|
|
{fileSize && <span className="text-secondary text-sm">{fileSize}</span>}
|
|
</div>
|
|
<div className="progress-bar">
|
|
<div
|
|
className="progress-bar-inner"
|
|
style={{ width: `${progress}%` }}
|
|
role="progressbar"
|
|
aria-valuenow={progress}
|
|
aria-valuemin={0}
|
|
aria-valuemax={100}
|
|
></div>
|
|
</div>
|
|
<div className="progress-text">
|
|
<span>{progress}%</span>
|
|
<span>{speed}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|