github.com/kubeshop/testkube@v1.17.23/docs/src/theme/CodeBlock/CopyButton/index.js (about)

     1  import React, { useCallback, useState, useRef, useEffect } from "react";
     2  import clsx from "clsx";
     3  // @ts-expect-error: TODO, we need to make theme-classic have type: module
     4  import copy from "copy-text-to-clipboard";
     5  import { translate } from "@docusaurus/Translate";
     6  import styles from "./styles.module.css";
     7  export default function CopyButton({ code, className }) {
     8    const [isCopied, setIsCopied] = useState(false);
     9    const copyTimeout = useRef(undefined);
    10    const handleCopyCode = useCallback(() => {
    11      if (code === "brew install testkube") {
    12        window.dataLayer.push({
    13          event: "download_download_mac",
    14        });
    15      }
    16      if (code.includes("choco install testkube")) {
    17        window.dataLayer.push({
    18          event: "download_download_windows",
    19        });
    20      }
    21      if (code.includes("sudo apt-get install -y testkube")) {
    22        window.dataLayer.push({
    23          event: "download_download_linux",
    24        });
    25      }
    26      if (code === "curl -sSLf https://get.testkube.io | sh") {
    27        window.dataLayer.push({
    28          event: "download_download_script",
    29        });
    30      }
    31      copy(code);
    32      setIsCopied(true);
    33      copyTimeout.current = window.setTimeout(() => {
    34        setIsCopied(false);
    35      }, 1000);
    36    }, [code]);
    37    useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
    38    return (
    39      <button
    40        type="button"
    41        aria-label={
    42          isCopied
    43            ? translate({
    44                id: "theme.CodeBlock.copied",
    45                message: "Copied",
    46                description: "The copied button label on code blocks",
    47              })
    48            : translate({
    49                id: "theme.CodeBlock.copyButtonAriaLabel",
    50                message: "Copy code to clipboard",
    51                description: "The ARIA label for copy code blocks button",
    52              })
    53        }
    54        title={translate({
    55          id: "theme.CodeBlock.copy",
    56          message: "Copy",
    57          description: "The copy button label on code blocks",
    58        })}
    59        className={clsx(
    60          "clean-btn",
    61          className,
    62          styles.copyButton,
    63          isCopied && styles.copyButtonCopied
    64        )}
    65        onClick={handleCopyCode}
    66      >
    67        <span className={styles.copyButtonIcons} aria-hidden="true">
    68          <svg className={styles.copyButtonIcon} viewBox="0 0 24 24">
    69            <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
    70          </svg>
    71          <svg className={styles.copyButtonSuccessIcon} viewBox="0 0 24 24">
    72            <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
    73          </svg>
    74        </span>
    75      </button>
    76    );
    77  }