ykonsole2/webui-react/src/primitives/misc/Misc.tsx

import "./Misc.sass";
import {Icon, WithChildren} from "../Shared";
import {Values} from "../../models/Shared";
import {faArrowUpRightDots, faHeart} from "@fortawesome/free-solid-svg-icons";

export function TitleLine({children}: WithChildren) {
  return (
    <div className="TitleLine">{children}</div>
  );
}

interface ValueProps {
  raw: Values | number
  valueKey: keyof Values
}

export function FluffyValue({raw, valueKey}: ValueProps): JSX.Element | null {
  if (typeof raw !== "number" && (raw[valueKey] === undefined || raw[valueKey] === null)) {
    return null;
  }

  return (
    <div className="FluffyValue">
      <Value raw={raw} valueKey={valueKey}/>
    </div>
  );
}

export function Value({raw, valueKey}: ValueProps): JSX.Element | null {
  const actual = typeof raw === "number" ? raw : (raw[valueKey]);

  if (actual !== null && actual !== undefined) {
    if (valueKey === "time") {
      const minutes = Math.floor(actual / 60).toString(10).padStart(2, "0");
      const seconds = (actual % 60).toString(10).padStart(2, "0");

      return <><strong>{minutes}</strong>'<strong>{seconds}</strong>"</>;
    }

    if (valueKey === "calories") {
      return <><strong>{actual}</strong> kcal</>;
    }

    if (valueKey === "distance") {
      const km = actual / 1000;

      return <><strong>{km.toFixed(1)}</strong> km</>;
    }

    if (valueKey === "level") {
      return (
        <>
          <Icon subtle value={faArrowUpRightDots}/>
          {" "}
          <strong>{actual}</strong>
        </>
      );
    }

    if (valueKey === "rpmSpeed") {
      return <><strong>{actual}</strong> rpm</>
    }

    if (valueKey === "pulse") {
      return (
        <>
          <Icon subtle value={faHeart}/>
          {" "}
          <strong>{actual}</strong>
        </>
      );
    }
  }

  return null;
}