27 lines
1.3 KiB
Plaintext
27 lines
1.3 KiB
Plaintext
component CodeBlock {
|
|
props {
|
|
language = "text"
|
|
title = ""
|
|
code = ""
|
|
copyable = true
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<section class="overflow-hidden bg-[var(--wire-color-code-background,#020617)] text-[var(--wire-color-code-text,#e2e8f0)] {class}">
|
|
<header class="flex items-center justify-between gap-4 border-b border-[var(--wire-color-code-border,#1e293b)] px-4 py-3 text-xs text-[var(--wire-color-code-muted,#94a3b8)] sm:px-5">
|
|
<span class="inline-flex items-center gap-2 font-medium">
|
|
<span class="icon-[lucide--terminal]" aria-hidden="true"></span>
|
|
{#if title}{title}{:else}{language}{/if}
|
|
</span>
|
|
{#if copyable}
|
|
<button type="button" data-copy-code="{code}" class="inline-flex items-center gap-2 rounded-lg border border-[var(--wire-color-code-border,#334155)] px-3 py-1.5 font-semibold text-[var(--wire-color-code-text,#e2e8f0)] transition hover:bg-[var(--wire-color-code-surface,#0f172a)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]">
|
|
<span class="icon-[lucide--copy]" aria-hidden="true"></span>Copy
|
|
</button>
|
|
{/if}
|
|
</header>
|
|
<pre class="m-0 max-w-full overflow-x-auto p-5 text-sm leading-7"><code>{code}</code></pre>
|
|
</section>
|
|
}
|
|
}
|