26 lines
849 B
TypeScript
26 lines
849 B
TypeScript
import {levelCalculator} from "@/resources/level";
|
|
import clsx from "clsx";
|
|
|
|
interface Props {
|
|
experience: number;
|
|
className?: string;
|
|
progressBarWidth?: string;
|
|
}
|
|
|
|
export default function LevelProgressBar({experience, className, progressBarWidth = "w-32 md:w-64"}: Props) {
|
|
const levelResult = levelCalculator(experience);
|
|
|
|
return (
|
|
<div className={clsx("flex flex-col items-center", className)}>
|
|
<div className="flex gap-3 items-center text-sm md:text-base">
|
|
<span>Lvl. {levelResult.currentLevel}</span>
|
|
<progress className={clsx("progress progress-success", progressBarWidth)} value={levelResult.percentage} max="100" />
|
|
<span>Lvl. {levelResult.nextLevel}</span>
|
|
</div>
|
|
<span className="text-xs">
|
|
{experience.toLocaleString("en")} / {levelResult.nextLevelExperience.toLocaleString("en")}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|