39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import type { VariantProps } from "class-variance-authority";
|
|
import { cva } from "class-variance-authority";
|
|
|
|
import classNames from "@calcom/ui/classNames";
|
|
|
|
const progressBarStyles = cva("h-2 rounded-full", {
|
|
variants: {
|
|
color: {
|
|
green: "bg-green-500",
|
|
blue: "bg-blue-500",
|
|
red: "bg-red-500",
|
|
yellow: "bg-yellow-500",
|
|
gray: "bg-gray-500",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
color: "gray",
|
|
},
|
|
});
|
|
|
|
export interface ProgressBarProps extends VariantProps<typeof progressBarStyles> {
|
|
percentageValue: number;
|
|
label?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function ProgressBar({ color, percentageValue, label, className }: ProgressBarProps) {
|
|
const clampedPercentage = Math.min(100, Math.max(0, percentageValue));
|
|
|
|
return (
|
|
<div className={classNames("flex w-full items-center gap-3", className)}>
|
|
<div className="bg-subtle h-2 flex-1 rounded-full">
|
|
<div className={progressBarStyles({ color })} style={{ width: `${clampedPercentage}%` }} />
|
|
</div>
|
|
{label && <span className="text-default text-sm font-medium">{label}</span>}
|
|
</div>
|
|
);
|
|
}
|