CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/components/landing/pricing-item.tsx
Views: 687
1
/*

2
 *  This file is part of CoCalc: Copyright © 2022 Sagemath, Inc.

3
 *  License: MS-RSL – see LICENSE.md for details

4
 */

5


6
import { Card, List } from "antd";

7
import { ReactNode } from "react";

8


9
import { Icon, IconName } from "@cocalc/frontend/components/icon";

10
import { COLORS } from "@cocalc/util/theme";

11
import { CSS } from "components/misc";

12


13
import styles from "./pricing.module.css";

14


15
interface Props {

16
  children: ReactNode;

17
  icon: IconName;

18
  title: string;

19
  style?: CSS;

20
  active?: boolean;

21
  onClick?: () => void;

22
}

23


24
const ACTIVE_STYLE: CSS = {

25
  outline: `2px solid ${COLORS.BLUE_D}`,

26
} as const;

27


28
export default function PricingItem({

29
  icon,

30
  children,

31
  title,

32
  style,

33
  active,

34
  onClick,

35
}: Props) {

36
  const outerStyle: CSS = {

37
    padding: 0,

38
    ...style,

39
  } as const;

40
  const activeStyle: CSS = active === true ? ACTIVE_STYLE : {};

41
  const innerStyle: CSS = { color: COLORS.GRAY_M, ...activeStyle };

42


43
  return (

44
    <List.Item style={outerStyle} onClick={onClick}>

45
      <Card

46
        className={onClick != null ? styles.item : undefined}

47
        styles={{ header: { backgroundColor: COLORS.BLUE_LLLL } }}

48
        style={innerStyle}

49
        type="inner"

50
        title={

51
          <span style={{ fontSize: "120%" }}>

52
            <Icon name={icon} style={{ marginRight: "10px" }} />{" "}

53
            <strong>{title}</strong>

54
          </span>

55
        }

56
      >

57
        {children}

58
      </Card>

59
    </List.Item>

60
  );

61
}

62


63
const STYLE: React.CSSProperties = {

64
  marginRight: "5px",

65
  display: "inline-block",

66
  color: COLORS.GRAY_DD,

67
} as const;

68


69
interface Line {

70
  amount?: string | number | ReactNode;

71
  desc?: string | ReactNode;

72
  indent?: boolean;

73
}

74


75
export function Line(props: Line) {

76
  const { amount, desc, indent = true } = props;

77
  if (!amount)

78
    return (

79
      <div>

80
        ---<b style={STYLE}>&nbsp;</b>

81
      </div>

82
    );

83


84
  let unit = "";

85
  if (typeof desc === "string") {

86
    if (desc?.includes("RAM") || desc?.includes("Disk")) {

87
      unit = " GB";

88
    } else if (desc?.includes("CPU")) {

89
      unit = amount == 1 ? "core" : "cores";

90
    } else if (desc == "Projects") {

91
      unit = "simultaneously running";

92
    } else if (desc?.includes("Overcommit")) {

93
      unit = "x";

94
    }

95
  }

96


97
  const indentStyle: CSS = indent ? { width: "3em", textAlign: "right" } : {};

98


99
  return (

100
    <div>

101
      <b style={STYLE}>

102
        <div style={{ display: "inline-block", ...indentStyle }}>{amount}</div>{" "}

103
        {unit}

104
      </b>{" "}

105
      {desc}

106
    </div>

107
  );

108
}

109


110