Copy to clipboard

.token-block {
  background-color: var(--goa-color-interactive-default);
  height: 22px;
  width: 24px;
  border-radius: var(--goa-border-radius-s);
}

const [isCopied, setIsCopied] = useState(false);

function copyCode() {
  const codeToCopy = "$goa-color-interactive-default";
  navigator.clipboard.writeText(codeToCopy).then(() => {
    setIsCopied(true);
    setTimeout(() => setIsCopied(false), 1000);
  });
}

<GoabBlock alignment="center">
  <div className="token-block" />
  <span>$goa-color-interactive-default</span>
  <GoabTooltip content={isCopied ? "Copied" : "Copy?"} position="top">
    <GoabIconButton icon="copy" onClick={copyCode} mt="2xs" />
  </GoabTooltip>
</GoabBlock>

isCopied = false;

copyCode(): void {
  const codeToCopy = "$goa-color-interactive-default";
  navigator.clipboard.writeText(codeToCopy).then(() => {
    this.isCopied = true;
    setTimeout(() => (this.isCopied = false), 1000);
  });
}

<goab-block alignment="center" gap="s">
  <div class="token-block"></div>
  <span>$goa-color-interactive-default</span>
  <goab-tooltip [content]="isCopied ? 'Copied' : 'Copy?'" position="top">
    <goab-icon-button icon="copy" (onClick)="copyCode()" mt="2xs"></goab-icon-button>
  </goab-tooltip>
</goab-block>

.token-block {
  background-color: var(--goa-color-interactive-default);
  height: 22px;
  width: 24px;
  border-radius: var(--goa-border-radius-s);
}

const copyBtn = document.getElementById("copy-btn");
const tooltip = document.getElementById("copy-tooltip");

function copyCode() {
  const codeToCopy = "$goa-color-interactive-default";
  navigator.clipboard.writeText(codeToCopy).then(() => {
    tooltip.setAttribute("content", "Copied");
    setTimeout(() => {
      tooltip.setAttribute("content", "Copy?");
    }, 1000);
  });
}

copyBtn.addEventListener("_click", copyCode);

<goa-block alignment="center">
  <div class="token-block"></div>
  <span>$goa-color-interactive-default</span>
  <goa-tooltip id="copy-tooltip" content="Copy?" position="top">
    <goa-icon-button id="copy-btn" icon="copy" mt="2xs"></goa-icon-button>
  </goa-tooltip>
</goa-block>