1
import { STATE_INFO } from "@cocalc/util/db-schema/compute-servers";
2
import { Tooltip } from "antd";
3
import { currency, round4 } from "@cocalc/util/misc";
4

5
export default function CurrentCost({ state, cost_per_hour }) {
6
  const { color, stable } = STATE_INFO[state ?? "off"] ?? {};
7
  let cost;
8
  if (cost_per_hour == null) {
9
    cost = ""; // no info
10
  } else if (stable) {
11
    if (state == "deprovisioned") {
12
      cost = "";
13
    } else {
14
      const cost_per_month = `${currency(cost_per_hour * 730)}`;
15
      cost = (
16
        <Tooltip
17
          title={() => (
18
            <>
19
              Cost per hour (USD): ${round4(cost_per_hour)}
20
              <br /> Cost per month (USD): {cost_per_month}
21
            </>
22
          )}
23
          placement="right"
24
        >
25
          <span style={{ textWrap: "nowrap" }}>
26
            {currency(cost_per_hour)}/hour
27
          </span>
28
        </Tooltip>
29
      );
30
    }
31
  }
32

33
  return <span style={{ color, textWrap: "nowrap" }}>{cost}</span>;
34
}
35

36