BlockViewerCode() — ui Function Reference

Architecture documentation for the BlockViewerCode() function in block-viewer.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives calls 1

Entity Profile

ComponentRegistry→ UIPrimitives→ BlockViewerCode() — ui Function Reference

Dependency Diagram

graph TD
  71cdc71b_b86c_adff_df8d_588d48c0e8f9["BlockViewerCode()"]
  1286b7b7_c8bd_53b6_a231_a71e5b6ebd50["block-viewer.tsx"]
  71cdc71b_b86c_adff_df8d_588d48c0e8f9 -->|defined in| 1286b7b7_c8bd_53b6_a231_a71e5b6ebd50
  83e47c77_6e8f_02ce_db45_c9629b80fe41["useBlockViewer()"]
  71cdc71b_b86c_adff_df8d_588d48c0e8f9 -->|calls| 83e47c77_6e8f_02ce_db45_c9629b80fe41
  style 71cdc71b_b86c_adff_df8d_588d48c0e8f9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/block-viewer.tsx lines 278–311

function BlockViewerCode() {
  const { activeFile, highlightedFiles } = useBlockViewer()

  const file = React.useMemo(() => {
    return highlightedFiles?.find((file) => file.target === activeFile)
  }, [highlightedFiles, activeFile])

  if (!file) {
    return null
  }

  return (
    <div className="mr-[14px] flex overflow-hidden rounded-xl bg-zinc-950 text-white group-data-[view=preview]/block-view-wrapper:hidden md:h-[--height]">
      <div className="w-[280px]">
        <BlockViewerFileTree />
      </div>
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex h-12 items-center gap-2 border-b border-zinc-700 bg-zinc-900 px-4 text-sm font-medium">
          <File className="size-4" />
          {file.target}
          <div className="ml-auto flex items-center gap-2">
            <BlockCopyCodeButton />
          </div>
        </div>
        <div
          key={file?.path}
          data-rehype-pretty-code-fragment
          dangerouslySetInnerHTML={{ __html: file?.highlightedContent ?? "" }}
          className="relative flex-1 overflow-hidden after:absolute after:inset-y-0 after:left-0 after:w-10 after:bg-zinc-950 [&_.line:before]:sticky [&_.line:before]:left-2 [&_.line:before]:z-10 [&_.line:before]:translate-y-[-1px] [&_.line:before]:pr-1 [&_pre]:h-[--height] [&_pre]:overflow-auto [&_pre]:!bg-transparent [&_pre]:pb-20 [&_pre]:pt-4 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:leading-relaxed"
        />
      </div>
    </div>
  )
}