39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import {Module} from "@/interfaces";
|
|
import clsx from "clsx";
|
|
|
|
interface Props {
|
|
label: string;
|
|
percentage: number;
|
|
color: "blue" | "orange" | "green" | Module;
|
|
useColor?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export default function ProgressBar({label, percentage, color, useColor = false, className}: Props) {
|
|
const progressColorClass: {[key in typeof color]: string} = {
|
|
blue: "bg-mti-blue-light",
|
|
orange: "bg-mti-orange-light",
|
|
green: "bg-mti-green-light",
|
|
reading: "bg-ielts-reading",
|
|
listening: "bg-ielts-listening",
|
|
writing: "bg-ielts-writing",
|
|
speaking: "bg-ielts-speaking",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"relative rounded-full overflow-hidden flex items-center justify-center",
|
|
className,
|
|
!useColor ? "bg-mti-gray-anti-flash" : progressColorClass[color],
|
|
useColor && "bg-opacity-20",
|
|
)}>
|
|
<div
|
|
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>
|
|
</div>
|
|
);
|
|
}
|