27 lines
784 B
TypeScript
27 lines
784 B
TypeScript
import Image from "next/image";
|
|
|
|
type Props = {
|
|
total: number;
|
|
used: number;
|
|
};
|
|
|
|
const ProgressBar: React.FC<Props> = ({ used, total }) => (
|
|
<div className="flex gap-2.5 items-center p-[10px]">
|
|
<div className="text-xs leading-[18px] gap-0.5 flex items-center">
|
|
<Image src={"icons/app_icon.svg"} width={18} height={18} alt="" />
|
|
Updating
|
|
</div>
|
|
<div className="w-[150px] relative bg-blue-200 h-1 rounded-md flex">
|
|
<div
|
|
className="absolute top-0 left-0 h-full rounded-md bg-blue-600"
|
|
style={{ width: `${((used / total) * 100).toFixed(2)}%` }}
|
|
></div>
|
|
</div>
|
|
<div className="text-xs leading-[18px]">
|
|
{((used / total) * 100).toFixed(0)}%
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default ProgressBar;
|