packages/excalidraw/components/TTDDialog/TTDDialogOutput.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import Spinner from "../Spinner";

const ErrorComp = ({ error }: { error: string }) => {
  return (
    <div
      data-testid="ttd-dialog-output-error"
      className="ttd-dialog-output-error"
    >
      Error! <p>{error}</p>
    </div>
  );
};

interface TTDDialogOutputProps {
  error: Error | null;
  canvasRef: React.RefObject<HTMLDivElement | null>;
  loaded: boolean;
}

export const TTDDialogOutput = ({
  error,
  canvasRef,
  loaded,
}: TTDDialogOutputProps) => {
  return (
    <div className="ttd-dialog-output-wrapper">
      {error && <ErrorComp error={error.message} />}
      {loaded ? (
        <div
          ref={canvasRef}
          style={{ opacity: error ? "0.15" : 1 }}
          className="ttd-dialog-output-canvas-container"
        />
      ) : (
        <Spinner size="2rem" />
      )}
    </div>
  );
};