1
import { Icon } from "@cocalc/frontend/components/icon";
2
import { human_readable_size } from "@cocalc/util/misc";
3
import { Button } from "antd";
4

5
export default function CloudFilesystemAvatar({
6
  cloudFilesystem,
7
  showMetrics,
8
  setShowMetrics,
9
}) {
10
  const { color, project_specific_id } = cloudFilesystem;
11
  return (
12
    <div style={{ width: "64px", marginBottom: "-20px" }}>
13
      <Icon
14
        name={"disk-round"}
15
        style={{ fontSize: "30px", color: color ?? "#666" }}
16
      />
17
      <div style={{ color: "#888" }}>Id: {project_specific_id}</div>
18
      <div
19
        style={{ color: "#888", cursor: "pointer" }}
20
        onClick={() => {
21
          setShowMetrics(!showMetrics);
22
        }}
23
      >
24
        {human_readable_size(cloudFilesystem.bytes_used ?? 0)}
25
      </div>
26
      <Button
27
        style={{ marginLeft: "-5px" }}
28
        type={showMetrics ? "default" : "text"}
29
        onClick={() => {
30
          setShowMetrics(!showMetrics);
31
        }}
32
      >
33
        <Icon style={{ fontSize: "15pt" }} name="graph" />
34
      </Button>
35
    </div>
36
  );
37
}
38

39