mirror of
https://github.com/fankes/komari-theme-purcarte.git
synced 2025-10-20 04:19:22 +08:00
27 lines
657 B
TypeScript
27 lines
657 B
TypeScript
import { getProgressBarClass } from "@/utils";
|
|
|
|
export const ProgressBar = ({
|
|
value,
|
|
h = "h-3",
|
|
className,
|
|
}: {
|
|
value: number;
|
|
h?: string;
|
|
className?: string;
|
|
}) => {
|
|
const clampedValue = Math.max(0, Math.min(100, value));
|
|
const progressRoundedClass =
|
|
clampedValue < 10 ? "rounded-sm" : "rounded-full";
|
|
|
|
return (
|
|
<div
|
|
className={`w-full bg-(--accent-4)/50 rounded-full ${h} overflow-hidden`}>
|
|
<div
|
|
className={`${h} ${progressRoundedClass} transition-all duration-500 ${getProgressBarClass(
|
|
clampedValue
|
|
)} ${className}`}
|
|
style={{ width: `${clampedValue}%` }}></div>
|
|
</div>
|
|
);
|
|
};
|