CodeBlock

Styled code display with language badge, optional filename, and one-click copy button.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

CodeBlockStyled code display with language badge, optional filename, and one-click copy button.

"use client";
import { useState } from "react";

type CodeBlockProps = {
  code: string;
  language?: string;
  filename?: string;
};

export function CodeBlock({ code, language, filename }: CodeBlockProps) {
  const [copied, setCopied] = useState(false);

  async function copy() {
    await navigator.clipboard.writeText(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  }

  return (
    <div className="pk-code-block">
      <div className="pk-code-block-header">
        <div className="pk-code-block-meta">
          {filename && <span className="pk-code-block-filename">{filename}</span>}
          {language && <span className="pk-code-block-lang">{language}</span>}
        </div>
        <button className="pk-code-block-copy" onClick={copy}>
          {copied ? "Copied!" : "Copy"}
        </button>
      </div>
      <pre className="pk-code-block-pre"><code>{code}</code></pre>
    </div>
  );
}

Props

Prop	Type	Default	Description
`code`*	`string`	—	The code string to display
`language`	`string`	—	Language label shown in header
`filename`	`string`	—	Optional filename shown in header