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}}>{value}</span>
    {suffix !== null && (
      <>
        &nbsp;
        <span className="Score-suffix">{suffix}</span>
      </>
    )}
  </div>
);

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

  return (
    <div className="Timer">
      <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 DistanceScore = ({distance}) => <Score value={distance.toFixed(1)} suffix="km"/>;

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

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