Progress bar using Tailwind CSS

ProgressBar.tsx

export default function ProgressBar({ currentLevel }: { currentLevel: number }) {
  return (
    <div className="flex justify-between items-center font-mono relative">
      {Array.from({ length: 9 }, (_, i) => i).map((index) => (
        <div
          key={index}
          className={`absolute h-1 z-0 ${index < currentLevel - 1 ? "bg-white" : "bg-zinc-800"}`}
          style={{ left: `calc(${(index / 10) * 100}% + 4%)`, width: `11%` }}
        ></div>
      ))}
      {Array.from({ length: 10 }, (_, i) => i + 1).map((level) => (
        <div
          key={level}
          className={`relative z-20 w-6 h-6 text-xs md:text-base md:w-10 md:h-10 rounded-full flex items-center justify-center font-bold ${
            level <= currentLevel ? "bg-white text-black" : "bg-zinc-800 text-white"
          }`}
        >
          {level}
        </div>
      ))}
    </div>
  );
}