mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
30 lines
1.2 KiB
Plaintext
30 lines
1.2 KiB
Plaintext
{% macro code_block(code, language="html") %}
|
|
<div
|
|
class="relative"
|
|
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="text-sm max-h-[650px] overflow-y-auto rounded-xl scrollbar"><code class="language-{{ language }} !bg-neutral-900 p-0">{{- code | escape -}}</code></pre>
|
|
|
|
<button
|
|
@click="copy()"
|
|
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3 absolute right-3 top-3"
|
|
>
|
|
{% lucide "clipboard", { "class": "size-4", "x-show": "!copied" } %}
|
|
{% lucide "check", { "class": "size-4", "x-show": "copied" } %}
|
|
</button>
|
|
</div>
|
|
{% endmacro %}
|
|
|