src/shared/components/common/progress-bar.tsx

   1 import classNames from "classnames";
   2 import { ThemeColor } from "../../utils";
   3
   4 interface ProgressBarProps {
   5   className?: string;
   6   backgroundColor?: ThemeColor;
   7   barColor?: ThemeColor;
   8   striped?: boolean;
   9   animated?: boolean;
  10   min?: number;
  11   max?: number;
  12   value: number;
  13   text?: string;
  14 }
  15
  16 const ProgressBar = ({
  17   value,
  18   animated = false,
  19   backgroundColor = "secondary",
  20   barColor = "primary",
  21   className,
  22   max = 100,
  23   min = 0,
  24   striped = false,
  25   text,
  26 }: ProgressBarProps) => (
  27   <div className={classNames("progress", `bg-${backgroundColor}`, className)}>
  28     <div
  29       className={classNames("progress-bar", `bg-${barColor}`, {
  30         "progress-bar-striped": striped,
  31         "progress-bar-animated": animated,
  32       })}
  33       role="progressbar"
  34       aria-valuemin={min}
  35       aria-valuemax={max}
  36       aria-valuenow={value}
  37       style={`width: ${((value - min) / max) * 100}%;`}
  38     >
  39       {text}
  40     </div>
  41   </div>
  42 );
  43
  44 export default ProgressBar;