CodeBlock

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CodeBlock
  language="text"
  filename="filename"
  code="code"
/>

Legacy mount name: data-component="CodeBlock".

Props and attributes

Slots

This component does not declare a slot.

Events

• click

Source contract

Installed source: components/CodeBlock.wrn

component CodeBlock {
  props {
    class = ""
    language = "text"
    filename = ""
    code = ""
  }
  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>
    }
}