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

Started improving the responsiveness of the application

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-16 23:52:41 +01:00
parent aaa7d6deb3
commit 550cdba5a7
5 changed files with 264 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,9 +7,10 @@ interface Props {
color: "red" | "rose" | "purple" | Module;
useColor?: boolean;
className?: string;
textClassName?: string;
}
export default function ProgressBar({label, percentage, color, useColor = false, className}: Props) {
export default function ProgressBar({label, percentage, color, useColor = false, className, textClassName}: Props) {
const progressColorClass: {[key in typeof color]: string} = {
red: "bg-mti-red-light",
rose: "bg-mti-rose-light",
@@ -32,7 +33,7 @@ export default function ProgressBar({label, percentage, color, useColor = false,
style={{width: `${percentage}%`}}
className={clsx("absolute transition-all duration-300 ease-in-out 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>
<span className={clsx("z-10 justify-self-center text-white text-sm font-bold", textClassName)}>{label}</span>
</div>
);
}