CodeBlock

<CodeBlock lang="bash">npm install @scope/package</CodeBlock>

'use client'

import { useState } from 'react'
import type * as React from 'react'

interface CodeBlockProps {
  lang:       string
  title?:     string
  children:   string
}

export function CodeBlock({ lang, title, children }: CodeBlockProps): React.JSX.Element {
  const [copied, setCopied] = useState(false)

  function handleCopy(): void {
    void navigator.clipboard.writeText(children).then(() => {
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }).catch(() => { /* copy failed silently */ })
  }

  return (
    <div className="vault-code-block">
      <div className="vault-code-block-header">
        {title ? (
          <span className="vault-code-block-title">{title}</span>
        ) : (
          <span className="vault-code-block-lang">{lang}</span>
        )}
        <button type="button" className="vault-copy-btn" onClick={handleCopy}>
          {copied ? (
            <>
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="20 6 9 17 4 12" />
              </svg>
              Copied
            </>
          ) : (
            <>
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
              </svg>
              Copy
            </>
          )}
        </button>
      </div>
      <div className="vault-code-block-body">
        <pre>{children}</pre>
      </div>
    </div>
  )
}