36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import prettyBytes from "pretty-bytes";
|
|
import React, { ReactElement } from "react";
|
|
|
|
export const DownloadProgressTick = (props): ReactElement => {
|
|
return (
|
|
<div >
|
|
<h4 className="is-size-6">{props.data.name}</h4>
|
|
<div>
|
|
<span className="is-size-3 has-text-weight-semibold">
|
|
{prettyBytes(props.data.downloaded_bytes)} of{" "}
|
|
{prettyBytes(props.data.size)}{" "}
|
|
</span>
|
|
<progress
|
|
className="progress is-small is-success"
|
|
value={props.data.downloaded_bytes}
|
|
max={props.data.size}
|
|
>
|
|
{(parseInt(props.data.downloaded_bytes) / parseInt(props.data.size)) *
|
|
100}
|
|
%
|
|
</progress>
|
|
</div>
|
|
<div className="is-size-5">
|
|
{prettyBytes(props.data.speed)} per second.
|
|
</div>
|
|
<div className="is-size-5">
|
|
Time left:
|
|
{Math.round(parseInt(props.data.seconds_left) / 60)}
|
|
</div>
|
|
<div>{props.data.target}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DownloadProgressTick;
|