46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import {Module} from "@/interfaces";
|
|
import clsx from "clsx";
|
|
|
|
interface Props {
|
|
label: string;
|
|
percentage: number;
|
|
color: "red" | "rose" | "purple" | Module;
|
|
mark?: number;
|
|
markLabel?: string;
|
|
useColor?: boolean;
|
|
className?: string;
|
|
textClassName?: string;
|
|
}
|
|
|
|
export default function ProgressBar({label, percentage, color, mark, markLabel, useColor = false, className, textClassName}: Props) {
|
|
const progressColorClass: {[key in typeof color]: string} = {
|
|
red: "bg-mti-red-light",
|
|
rose: "bg-mti-rose-light",
|
|
purple: "bg-mti-purple-light",
|
|
reading: "bg-ielts-reading",
|
|
listening: "bg-ielts-listening",
|
|
writing: "bg-ielts-writing",
|
|
speaking: "bg-ielts-speaking",
|
|
level: "bg-ielts-level",
|
|
};
|
|
|
|
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",
|
|
)}>
|
|
{mark && (
|
|
<div style={{left: `${mark}%`}} className={clsx("w-3 h-2 bg-mti-gray-davy/60 absolute -translate-x-1/2 top-0 z-20 cursor-pointer")} />
|
|
)}
|
|
<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={clsx("z-[1] justify-self-center text-white text-sm font-bold", textClassName)}>{label}</span>
|
|
</div>
|
|
);
|
|
}
|