content component

CodeBlock

Reusable code block component.

@wrnexus/ui 0.2.644 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="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 {class}"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div>
  }
}