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>
27 lines
736 B
TypeScript
27 lines
736 B
TypeScript
type Props = {
|
|
now: number;
|
|
label?: string | null;
|
|
variant?: "warn" | "info" | "success" | "error";
|
|
};
|
|
|
|
export const ProgressBar = ({ now, variant, label }: Props) => {
|
|
const progressLabel = label ?? `${now.toFixed(2)}%`;
|
|
|
|
const variantClassName = {
|
|
warn: "bg-yellow-500",
|
|
info: "bg-blue-500 text-white",
|
|
success: "bg-green-700 text-white",
|
|
error: "bg-red-500 text-white",
|
|
}[variant ?? "info"];
|
|
|
|
return (
|
|
<div className={"w-full bg-gray-200 rounded-full"}>
|
|
<div
|
|
className={`text-xs bg-blue-500 font-medium transition-all text-center p-0.5 leading-none rounded-full ${variantClassName}`}
|
|
style={{ width: `${now}%` }}
|
|
>
|
|
{progressLabel}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|