BlockDisplay() — ui Function Reference

Architecture documentation for the BlockDisplay() function in block-display.tsx from the ui codebase.

Function tsx Internationalization RTLLayout calls 3

Entity Profile

Internationalization→ RTLLayout→ BlockDisplay() — ui Function Reference

Dependency Diagram

graph TD
  e1c315be_b4a3_0bbc_b4e0_23f5063185ba["BlockDisplay()"]
  336888d9_0bee_4622_33dc_3b5f87613c80["block-display.tsx"]
  e1c315be_b4a3_0bbc_b4e0_23f5063185ba -->|defined in| 336888d9_0bee_4622_33dc_3b5f87613c80
  2c5644a7_92cd_2176_9a08_bdafd6d667fd["getCachedRegistryItem()"]
  e1c315be_b4a3_0bbc_b4e0_23f5063185ba -->|calls| 2c5644a7_92cd_2176_9a08_bdafd6d667fd
  de6bf7f8_6ace_361c_3059_b91b29145d2a["getCachedFileTree()"]
  e1c315be_b4a3_0bbc_b4e0_23f5063185ba -->|calls| de6bf7f8_6ace_361c_3059_b91b29145d2a
  a3fd7b52_92c1_47a3_f20d_2c9a6dffd48b["getCachedHighlightedFiles()"]
  e1c315be_b4a3_0bbc_b4e0_23f5063185ba -->|calls| a3fd7b52_92c1_47a3_f20d_2c9a6dffd48b
  style e1c315be_b4a3_0bbc_b4e0_23f5063185ba fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/block-display.tsx lines 15–51

export async function BlockDisplay({
  name,
  styleName,
}: {
  name: string
  styleName: Style["name"]
}) {
  const item = await getCachedRegistryItem(name, styleName)

  if (!item?.files) {
    return null
  }

  const [tree, highlightedFiles] = await Promise.all([
    getCachedFileTree(item.files),
    getCachedHighlightedFiles(item.files),
  ])

  return (
    <BlockViewer
      item={item}
      tree={tree}
      highlightedFiles={highlightedFiles}
      styleName={styleName}
    >
      <ComponentPreview
        name={item.name}
        styleName={styleName}
        hideCode
        className={cn(
          "my-0 **:[.preview]:h-auto **:[.preview]:p-4 **:[.preview>.p-6]:p-0",
          item.meta?.containerClassName
        )}
      />
    </BlockViewer>
  )
}