24 lines
772 B
TypeScript
24 lines
772 B
TypeScript
import clsx from "clsx";
|
|
|
|
interface Props {
|
|
label: string;
|
|
percentage: number;
|
|
color: "blue" | "orange" | "green";
|
|
className?: string;
|
|
}
|
|
|
|
export default function ProgressBar({label, percentage, color, className}: Props) {
|
|
const progressColorClass: {[key in typeof color]: string} = {
|
|
blue: "bg-mti-blue-light",
|
|
orange: "bg-mti-orange-light",
|
|
green: "bg-mti-green-light",
|
|
};
|
|
|
|
return (
|
|
<div className={clsx("relative rounded-full bg-mti-gray-anti-flash overflow-hidden flex items-center justify-center", className)}>
|
|
<div style={{width: `${percentage}%`}} className={clsx("absolute top-0 left-0 h-full overflow-hidden", progressColorClass[color])} />
|
|
<span className="z-10 justify-self-center text-white text-sm font-bold">{label}</span>
|
|
</div>
|
|
);
|
|
}
|