1
import { Alert, Tag } from "antd";
2
import { Icon } from "@cocalc/frontend/components/icon";
3
import { COLORS } from "@cocalc/util/theme";
4
import A from "components/misc/A";
5

6
export default function PaygInfo({ what }) {
7
  return (
8
    <Alert
9
      showIcon
10
      icon={<Icon name="servers" />}
11
      type="info"
12
      message={
13
        <div>
14
          <Tag style={{ float: "right" }} color={COLORS.ANTD_GREEN}>
15
            new
16
          </Tag>
17
          Compute Servers and Pay As You Go Upgrades -- alternative to {what}
18
        </div>
19
      }
20
      description={
21
        <div>
22
          <ul>
23
            <li>
24
              If you need a large amount of compute power, disk space, GPUs,
25
              root privileges, or to run commercial software, add a{" "}
26
              <A href="https://doc.cocalc.com/compute_server.html">
27
                pay as you go compute server to your project
28
              </A>
29
              .
30
            </li>
31
            <li>
32
              If you need to upgrade your project for a few minutes or a few
33
              hours, you can use{" "}
34
              <A href="https://doc.cocalc.com/paygo.html" external>
35
                pay as you go project upgrades
36
              </A>
37
              .
38
            </li>
39
          </ul>
40
        </div>
41
      }
42
    />
43
  );
44
}
45

46