trimlog-ykonsole-chrome-extension/my-bois/src/components/Score.jsx

import React from 'react';
import {COLOR_NEUTRAL, colorByDiff} from "../helpers/color";

import "./Score.css";

const Score = ({value, suffix = null, color = COLOR_NEUTRAL}) => (
  <div className="Score">
    <span className="Score-value" style={{color}}>{!isNaN(value) ? value : 0}</span>
    {suffix !== null && (
      <>
        &nbsp;
        <span className="Score-suffix">{suffix}</span>
      </>
    )}
  </div>
);

export const Timer = ({minutes, seconds, cooldownMin}) => {
  function pad(number) {
    return number >= 10 ? `${number}` : `0${number}`;
  }

  const hasCooldown = cooldownMin >= 0 && cooldownMin !== void(0);
  const isCooldown = hasCooldown && minutes >= cooldownMin;
  const awaitsCooldown = hasCooldown && !isCooldown;

  const classes = ["Timer"];
  if (isCooldown) {
    classes.push("Timer-cooldown");
  } else if (awaitsCooldown) {
    classes.push("Timer-awaits-cooldown");
  }

  return (
    <div className={classes.join(" ")}>
      <span className="Timer-number">{pad(minutes)}</span>
      {" : "}
      <span className="Timer-number">{pad(seconds)}</span>
    </div>
  );
};

export const CalorieScore = ({calories, diff, prevDiff}) => (
  <Score value={calories} color={colorByDiff(diff, prevDiff)} suffix="kal"/>
);

export const LevelScore = ({level}) => <Score value={level} suffix="lvl"/>;

export const RpmScore = ({rpm}) => <Score value={rpm} suffix="rpm"/>;

export const CpmScore = ({cpm}) => <Score value={cpm.toFixed(1)} suffix="kpm"/>;