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.

20 lines
687 B

5 years ago
5 years ago
5 years ago
  1. import React from 'react';
  2. import {diffString} from "../helpers/diff";
  3. import "./Milestones.css";
  4. import {colorByDiff} from "../helpers/color";
  5. export const Milestones = ({milestones}) => (
  6. <table className="Milestone">
  7. <tbody>
  8. {milestones.map(milestone => <Milestone key={milestone.minutes} {...milestone} />)}
  9. </tbody>
  10. </table>
  11. );
  12. const Milestone = ({minutes, calories, diff, prevDiff}) => (
  13. <tr style={{color: colorByDiff(diff, prevDiff)}}>
  14. <td className="Milestone-minutes">&nbsp;{minutes}</td>
  15. <td className="Milestone-calories">&nbsp;{calories}</td>
  16. <td className="Milestone-diff">&nbsp;{minutes % 5 === 0 ? diffString(diff) : ""}</td>
  17. </tr>
  18. );