release: WRNexusJS 0.2.77

.publish/ui/components/CodeBlock.wrn

@@ -1,12 +1,26 @@
 component CodeBlock {
   props {
-    class = ""
     language = "text"
-    filename = ""
+    title = ""
     code = ""
+    copyable = true
+    class = ""
   }
-  state copied = false
+
   view {
-    <div class="min-w-0 overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 shadow-2xl shadow-slate-950/20 {class}"><div class="flex min-h-12 items-center justify-between gap-4 border-b border-slate-800 px-4 text-xs text-slate-400"><span class="inline-flex min-w-0 items-center gap-2 truncate"><span class="icon-[lucide--terminal] size-4 shrink-0" aria-hidden="true"></span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-700 px-2.5 py-1.5 font-semibold text-slate-300 transition hover:border-slate-600 hover:bg-slate-800 hover:text-white"><span class="{copied ? 'icon-[lucide--check]' : 'icon-[lucide--copy]'} size-3.5" aria-hidden="true"></span>{copied ? 'Copied' : 'Copy'}</button></div><pre class="m-0 max-w-full overflow-x-auto whitespace-pre-wrap break-words p-5 font-mono text-[0.8125rem] leading-6 sm:whitespace-pre"><code>{code}</code></pre></div>
+    <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>
   }
 }