Code block

import * as React from "react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { CopyButton } from "@/components/ui/copy-button"

// `title` is content here — a file name shown in the header — not the HTML
// tooltip attribute.
export type CodeBlockProps = Omit<React.ComponentProps<"div">, "title"> & {
  code: string
  /** Shown as a chip in the header and used to name the scroll region. */
  language?: string
  /** A file name or a caption; adds the header on its own. */
  title?: React.ReactNode
  showLineNumbers?: boolean
  /** 1-based line numbers to tint — the lines a reader is meant to look at. */
  highlightLines?: number[]
  /** Pixels; the body scrolls past it. */
  maxHeight?: number
  copyable?: boolean
  wrap?: boolean
}

/**
 * A plain, dependency-free code panel: no syntax highlighting, just a
 * monospaced block with an optional gutter, highlighted lines, and a copy button.
 */
function CodeBlock({
  className,
  code,
  language,
  title,
  showLineNumbers = false,
  highlightLines,
  maxHeight,
  copyable = true,
  wrap = false,
  ...props
}: CodeBlockProps) {
  // One trailing newline is how every editor ends a file; rendering it would
  // add a blank numbered line that is not in the source.
  const lines = code.replace(/\n$/, "").split("\n")
  const highlighted = new Set(highlightLines)
  const hasHeader = Boolean(title) || Boolean(language) || copyable
  const gutterWidth = `${String(lines.length).length + 1}ch`

  return (
    <div
      data-slot="code-block"
      data-wrap={wrap || undefined}
      data-line-numbers={showLineNumbers || undefined}
      className={cn("overflow-hidden rounded-lg border bg-muted/40", className)}
      {...props}
    >
      {hasHeader ? (
        <div
          data-slot="code-block-header"
          className="flex h-9 items-center gap-2 border-b px-3 text-xs text-muted-foreground"
        >
          {title ? (
            <span data-slot="code-block-title" className="truncate font-medium text-foreground">
              {title}
            </span>
          ) : null}
          {language ? (
            <Badge variant="outline" className="font-mono">
              {language}
            </Badge>
          ) : null}
          {copyable ? (
            <CopyButton value={code} size="icon-xs" className="-me-1.5 ms-auto" />
          ) : null}
        </div>
      ) : null}

      <div
        data-slot="code-block-body"
        // A block that scrolls has to be reachable without a mouse, and a
        // focusable scroller needs a name of its own.
        tabIndex={0}
        role="region"
        aria-label={typeof title === "string" ? title : language ? `${language} code` : "Code"}
        className="overflow-auto focus-ring"
        style={maxHeight === undefined ? undefined : { maxHeight: `${maxHeight}px` }}
      >
        <pre className={cn("py-2 font-mono text-label leading-6", wrap ? "w-full" : "w-fit min-w-full")}>
          <code data-slot="code-block-code" className={cn("block", wrap && "whitespace-pre-wrap")}>
            {lines.map((line, index) => {
              const number = index + 1
              return (
                <span
                  key={number}
                  data-slot="code-block-line"
                  data-line={number}
                  data-highlighted={highlighted.has(number) || undefined}
                  className={cn(
                    "flex min-h-6 px-3",
                    highlighted.has(number) && "bg-accent"
                  )}
                >
                  {showLineNumbers ? (
                    <span
                      data-slot="code-block-line-number"
                      // Out of the copy buffer and out of the reading order:
                      // the numbers are scaffolding, not part of the code.
                      aria-hidden="true"
                      className="me-4 shrink-0 text-end tabular-nums text-muted-foreground select-none"
                      style={{ width: gutterWidth }}
                    >
                      {number}
                    </span>
                  ) : null}
                  <span className={cn("min-w-0", wrap ? "break-words whitespace-pre-wrap" : "whitespace-pre")}>
                    {line}
                  </span>
                </span>
              )
            })}
          </code>
        </pre>
      </div>
    </div>
  )
}

export { CodeBlock }