content component

CodeBlock

Reusable code block component.

@wrnexus/ui 0.2.654 props0 slots1 events

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

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`language`	`string`	Optional	`"text"`
`filename`	`string`	Optional	`""`
`code`	`string`	Optional	`""`

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>
  }
}