1
import { Button } from "antd";
2
import { CSSProperties, useEffect, useState } from "react";
3
import { CopyToClipboard } from "react-copy-to-clipboard";
4

5
import { Icon } from "@cocalc/frontend/components/icon";
6

7
interface Props {
8
  style?: CSSProperties;
9
  value?: string;
10
  size?;
11
  noText?: boolean;
12
  block?: true;
13
}
14

15
export default function CopyButton({
16
  style,
17
  value,
18
  size,
19
  noText = false,
20
  block,
21
}: Props) {
22
  const [copied, setCopied] = useState<boolean>(false);
23
  useEffect(() => {
24
    setCopied(false);
25
  }, [value]);
26
  return (
27
    <CopyToClipboard text={value} onCopy={() => setCopied(true)}>
28
      <Button
29
        block={block}
30
        size={size}
31
        type="text"
32
        style={style}
33
        onClick={(e) => e.stopPropagation()}
34
      >
35
        <Icon name={copied ? "check" : "copy"} />
36
        {noText ? undefined : copied ? "Copied" : "Copy"}
37
      </Button>
38
    </CopyToClipboard>
39
  );
40
}
41

42