50fc7f2f01
* add tailwindcss * add header component with logo and add torrent buttons * remove bootstrap from few files replace it with tailwindcss classes, add card which diplay all nessesarry information about torrent and current state * Add modal component and reorganize components folder * add useModal hook to render modal though react portal, remove UrlPromptModal and replace it with useModal. * add taliwindcss to Desctop app * removed bootstrap from deleteTorrentModal replace it with useModal * replacing bootstrap with useModal * saving * Saving * Header and cards now look good * Modals still broken... * still doesnt work * Finally it scrolls * Continuing to fix bugs * Continuing to fix bugs * Aler * Getting better * Desktop doesnt work with tailwind somehow * Desktop now works with tailwind * Styles fully work * (De)select all buttons * fix alert styles * Animate progress bar * Progress bar + error colors * Fix error message * Torrent status icon (#56) * add statusIcon component to display icon of the torrent status * change props name and remove isDownloading variable * Tweak styles for icon * Tweak styles * Update styles --------- Co-authored-by: Artur Lozovski <arccik@gmail.com>
42 lines
1 KiB
TypeScript
42 lines
1 KiB
TypeScript
import {
|
|
TorrentStats,
|
|
STATE_INITIALIZING,
|
|
STATE_PAUSED,
|
|
STATE_ERROR,
|
|
} from "../api-types";
|
|
import { formatBytes } from "../helper/formatBytes";
|
|
|
|
export const Speed: React.FC<{ statsResponse: TorrentStats }> = ({
|
|
statsResponse,
|
|
}) => {
|
|
switch (statsResponse.state) {
|
|
case STATE_PAUSED:
|
|
return "Paused";
|
|
case STATE_INITIALIZING:
|
|
return "Checking files";
|
|
case STATE_ERROR:
|
|
return "Error";
|
|
}
|
|
// Unknown state
|
|
if (statsResponse.state != "live" || statsResponse.live === null) {
|
|
return statsResponse.state;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{!statsResponse.finished && (
|
|
<div className="download-speed">
|
|
↓ {statsResponse.live.download_speed?.human_readable}
|
|
</div>
|
|
)}
|
|
<div className="upload-speed">
|
|
↑ {statsResponse.live.upload_speed?.human_readable}
|
|
{statsResponse.live.snapshot.uploaded_bytes > 0 && (
|
|
<span>
|
|
({formatBytes(statsResponse.live.snapshot.uploaded_bytes)})
|
|
</span>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|