simple-progress-bar.tsx

simple-progress-bar.tsx

import React from "react";

interface ProgressBarProps {
  progress: number;
}

const getColorClassName = (progress: number) => {
  if (progress < 20) return "bg-red-500";
  if (progress < 40) return "bg-orange-500";
  if (progress < 60) return "bg-yellow-500";
  if (progress < 80) return "bg-green-500";
  return "bg-blue-500";
};

export const ProgressBar: React.FC<ProgressBarProps> = ({ progress }) => {
  return (
    <div className="w-full h-2 flex-1 flex grow bg-gray-100 rounded-full">
      <div
        style={{ width: `${progress}%` }}
        className={`${getColorClassName(progress)} h-full rounded-full`}
      />
    </div>
  );
};

export const Usage = () => {
  const progress = 50;

  return (
    <div className="flex items-center gap-2 max-w-60 w-full">
      <ProgressBar progress={progress} />
      <span className="text-sm text-gray-800">{progress}%</span>
    </div>
  );
};