1
import { useCloudFilesystem } from "./hooks";
2
import ShowError from "@cocalc/frontend/components/error";
3
import { avatar_fontcolor } from "@cocalc/frontend/account/avatar/font-color";
4
import { ProjectTitle } from "@cocalc/frontend/projects/project-title";
5

6
interface Props {
7
  cloud_filesystem_id: number;
8
  showProject?: boolean;
9
}
10

11
export default function InlineCloudFilesystem({
12
  cloud_filesystem_id,
13
  showProject,
14
}: Props) {
15
  const [cloudFilesystem, error, setError] = useCloudFilesystem({
16
    cloud_filesystem_id,
17
  });
18

19
  if (cloudFilesystem == null) {
20
    return <span>Cloud File System</span>;
21
  }
22
  return (
23
    <span>
24
      Cloud File System{" "}
25
      <span
26
        style={{
27
          backgroundColor: cloudFilesystem.color,
28
          color: cloudFilesystem.color
29
            ? avatar_fontcolor(cloudFilesystem.color)
30
            : undefined,
31
        }}
32
      >
33
        {cloudFilesystem.title} (Id: {cloudFilesystem.project_specific_id})
34
      </span>
35
      {showProject && (
36
        <>
37
          {" "}
38
          in <ProjectTitle project_id={cloudFilesystem.project_id} />
39
        </>
40
      )}
41
      <ShowError error={error} setError={setError} />
42
    </span>
43
  );
44
}
45

46