ColorBadge.tsx

import React from "react";

function ColorBadge({ index: index, active=true }) {
  return (
    <div className="d-inline-block m-2" key={index}>
      {active ? (
        <div
          className={`color-of-badge-${index % 5}`}
          style={{ width: "20px", height: "35px", margin: "2px" }}
        ></div>
      ) : (
        <div
          className={`color-of-badge-blank`}
          style={{ width: "15px", height: "30px", margin: "2px" }}
        ></div>
      )}
    </div>
  );
}

export default ColorBadge;