You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.1 KiB
40 lines
1.1 KiB
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 && (
|
|
<>
|
|
|
|
<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"/>;
|