<script>
 const copyButtons = document.querySelectorAll("code > [data-copy-button]")

 copyButtons.forEach(button => {
  const content = button.parentElement?.textContent?.trim();
  if (content) {
    button.addEventListener("click", async () => {
      await navigator.clipboard.writeText(content)

      button.setAttribute("data-copied", "");

      setTimeout(() => {
        button.removeAttribute("data-copied");
      }, 2000)
    })
  }
 })
</script>

<button class="absolute right-0 group" data-copy-button>
  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
    fill="currentColor"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="h-6 w-6 group-data-[copied]:hidden"
  >
    <path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
    fill="currentColor"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="h-6 w-6 hidden group-data-[copied]:inline"
  >
    <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
  </svg>
</button>
