Function CodeBlock

packages/react/src/components/code-block.tsx:85–177

(props: {
  code: string;
  lang?: string;
  title?: string;
  maxHeight?: string;
  className?: string;
  theme?: ShikiThemeProp;
  /** Fires after a successful copy. Receives nothing — the code may be sensitive. */
  onCopy?: () => void;
})

// ---------------------------------------------------------------------------

export function CodeBlock(props: {
  code: string;
  lang?: string;
  title?: string;
  maxHeight?: string;
  className?: string;
  theme?: ShikiThemeProp;
  /** Fires after a successful copy. Receives nothing — the code may be sensitive. */
  onCopy?: () => void;
}) {
  const { code, lang: langHint, title, className, theme, onCopy } = props;
  const [expanded, setExpanded] = useState(false);
  const [copied, setCopied] = useState(false);

  const language = useMemo(() => detectLanguage(code, langHint), [code, langHint]);
  const highlighted = useHighlighted(code, language, theme);

  const lines = code.split("\n");
  const isLong = lines.length > 24;
  const maxH = !expanded && isLong ? (props.maxHeight ?? "24rem") : undefined;

  const handleCopy = useCallback(() => {
    void copyToClipboard(code).then((ok) => {
      if (!ok) {
        toast.error("Failed to copy to clipboard");
        return;
      }
      setCopied(true);
      onCopy?.();
      setTimeout(() => setCopied(false), 1500);
    });
  }, [code, onCopy]);

  return (
    <div className={cn("rounded-lg border border-border bg-card/60 overflow-hidden", className)}>
      {title && (
        <div className="flex items-center justify-between border-b border-border px-3 py-2">
          <span className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
            {title}
          </span>
          <Button
            variant="ghost"
            size="icon-xs"
            onClick={handleCopy}
            className="text-muted-foreground hover:text-muted-foreground"
            title="Copy"
          >
            {copied ? <CheckIcon /> : <CopyIcon />}
          </Button>
        </div>
      )}
      <div className="group relative">
        {!title && (
          <Button
            variant="ghost"
            size="icon-xs"
            onClick={handleCopy}
            className="absolute right-2 top-2 z-10 rounded-md border border-border bg-card/90 p-1.5 text-muted-foreground opacity-0 backdrop-blur-sm hover:text-foreground group-hover:opacity-100 transition-opacity"