BlockViewerCode() — ui Function Reference

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

Function tsx Internationalization RTLLayout calls 1

Entity Profile

Internationalization→ RTLLayout→ BlockViewerCode() — ui Function Reference

Dependency Diagram

graph TD
  3abfe635_e5e5_c977_f89c_d70abd3dc63c["BlockViewerCode()"]
  c3ac54aa_58a5_8188_b5f8_014a382dcef3["block-viewer.tsx"]
  3abfe635_e5e5_c977_f89c_d70abd3dc63c -->|defined in| c3ac54aa_58a5_8188_b5f8_014a382dcef3
  490f6bb9_b906_4b05_666d_dac1a32689b9["useBlockViewer()"]
  3abfe635_e5e5_c977_f89c_d70abd3dc63c -->|calls| 490f6bb9_b906_4b05_666d_dac1a32689b9
  style 3abfe635_e5e5_c977_f89c_d70abd3dc63c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/block-viewer.tsx lines 329–369

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

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

  if (!file) {
    return null
  }

  const language = file.path.split(".").pop() ?? "tsx"

  return (
    <div className="bg-code text-code-foreground mr-[14px] flex overflow-hidden rounded-xl border group-data-[view=preview]/block-view-wrapper:hidden md:h-(--height)">
      <div className="w-72">
        <BlockViewerFileTree />
      </div>
      <figure
        data-rehype-pretty-code-figure=""
        className="!mx-0 mt-0 flex min-w-0 flex-1 flex-col rounded-xl border-none"
      >
        <figcaption
          className="text-code-foreground [&_svg]:text-code-foreground flex h-12 shrink-0 items-center gap-2 border-b px-4 py-2 [&_svg]:size-4 [&_svg]:opacity-70"
          data-language={language}
        >
          {getIconForLanguageExtension(language)}
          {file.target}
          <div className="ml-auto flex items-center gap-2">
            <BlockCopyCodeButton />
          </div>
        </figcaption>
        <div
          key={file?.path}
          dangerouslySetInnerHTML={{ __html: file?.highlightedContent ?? "" }}
          className="no-scrollbar overflow-y-auto"
        />
      </figure>
    </div>
  )
}