devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Completed more of the home page of the new designs

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-12 09:31:20 +01:00
parent b2232df0c7
commit 6fe8a678ea
3 changed files with 99 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Low/ProgressBar.tsx
View File

@@ -8,9 +8,15 @@ interface Props {
}
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-gray-200 overflow-hidden flex items-center justify-center", className)}>
<div style={{width: `${percentage}%`}} className={clsx("absolute top-0 left-0 h-full overflow-hidden", `bg-mti-${color}-light`)} />
<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>
);