copy-command.astro

---
const { command, label = 'Copy' } = Astro.props;
---
<div class="copy-command" data-copy-command>
  <span class="copy-command-prompt" aria-hidden="true">$</span>
  <code class="copy-command-code">{command}</code>
  <button
    type="button"
    class="copy-command-btn"
    data-copy-btn
    data-command={command}
    aria-label={label}
  >
    <svg class="copy-command-icon copy-command-icon-copy" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
    </svg>
    <svg class="copy-command-icon copy-command-icon-check" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
  </button>
</div>

<script>
  document.querySelectorAll('[data-copy-command]').forEach((el) => {
    const btn = el.querySelector<HTMLButtonElement>('[data-copy-btn]');
    if (!btn) return;
    btn.addEventListener('click', async () => {
      const cmd = btn.getAttribute('data-command') ?? '';
      try {
        await navigator.clipboard.writeText(cmd);
        el.classList.add('is-copied');
        setTimeout(() => el.classList.remove('is-copied'), 1600);
      } catch {
        // noop
      }
    });
  });
</script>