Rishi Ghan
4f49e538a8
* 🏗️ Acquisition Panel refactor WIP * 🔧 Formatted the search query box * 🔧 Implementing download method * 🏗️ Refactored the AirDC++ download panel * 🌜 Initial Dark Mode support * 🌜 Trying dark mode on the react-select * Update App.scss * 🏗️ Migrating Navbar to TailwindCSS * 🖼️ Added solar icons * 🔧 Added solar icons * 🔧 Added code for dark mode toggle * 🏗️ Wiring up the dark mode toggle * 🌜 Added Dark mode to the body * 🏗️ Building out the import page * 🪑 Cleaning up the table styles * 🏗️ Cleaned up past imports table * 🏗️ Refactored Import socket events * 🏗️ Refactored the card grid on dashboard * 🏗️ Building variants for Cards * 🏗️ Added a horizontal medium variant * 🏗️ Cleaning up forms and cards * 🔧 Styling form inputs * 🏗️ Form refactor * 🔠 Added a monospace font * 🪑 Refactoring the table * 🧹 Formatting in connection confirmation panels * 🏗️ Refactoring table for library * 🏗️ Added icons and details to metadata * 🏗️ Cleaned the table further * 🏗️ Fixed fonts, and comic detail page first draft * ❌ Removing yarn.lockfile
35 lines
1013 B
TypeScript
35 lines
1013 B
TypeScript
import prettyBytes from "pretty-bytes";
|
|
import React, { ReactElement } from "react";
|
|
|
|
export const DownloadProgressTick = (props): ReactElement => {
|
|
return (
|
|
<div>
|
|
<h4 className="is-size-5">{props.data.name}</h4>
|
|
<div>
|
|
<span className="is-size-4 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-6 mt-1 mb-2">
|
|
<p>{prettyBytes(props.data.speed)} per second.</p>
|
|
Time left:
|
|
{Math.round(parseInt(props.data.seconds_left) / 60)}
|
|
</div>
|
|
|
|
<div>{props.data.target}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DownloadProgressTick;
|