basecoat/docs/src/_includes/macros/code_block.njk

{% macro code_block(code, language="html", class="my-4") %}
<div 
  class="relative {{ class }}"
  x-data="{ 
    copied: false, 
    copy() { 
      const codeElement = $refs.code;
      if (!codeElement) return;
      navigator.clipboard.writeText(codeElement.textContent || '').then(() => {
        this.copied = true;
        setTimeout(() => { this.copied = false }, 2000);
      }).catch(err => {
        console.error('Failed to copy text: ', err);
      });
    } 
  }"
>
  <pre x-ref="code" class="grid text-sm max-h-[650px] overflow-y-auto rounded-xl scrollbar"><code class="language-{{ language }} !bg-muted !p-3.5">{{- code | escape -}}</code></pre>
  
  <button 
    @click="copy()" 
    class="btn-icon-ghost size-8 absolute right-2.5 top-2 text-muted-foreground hover:text-foreground"
  >
    {% lucide "clipboard", {"x-show": "!copied" } %}
    {% lucide "check", {"x-show": "copied" } %}
  </button>
</div>
{% endmacro %}