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