BlockViewerView() — ui Function Reference

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

Function tsx Internationalization RTLLayout calls 1

Entity Profile

Internationalization→ RTLLayout→ BlockViewerView() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/components/block-viewer.tsx lines 263–288

function BlockViewerView({ styleName }: { styleName: Style["name"] }) {
  const { resizablePanelRef } = useBlockViewer()

  return (
    <div className="hidden group-data-[view=code]/block-view-wrapper:hidden md:h-(--height) lg:flex">
      <div className="relative grid w-full gap-4">
        <div className="absolute inset-0 right-4 [background-image:radial-gradient(#d4d4d4_1px,transparent_1px)] [background-size:20px_20px] dark:[background-image:radial-gradient(#404040_1px,transparent_1px)]"></div>
        <ResizablePanelGroup
          orientation="horizontal"
          className="after:bg-surface/50 relative z-10 after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-xl"
        >
          <ResizablePanel
            panelRef={resizablePanelRef}
            className="bg-background relative aspect-[4/2.5] overflow-hidden rounded-lg border md:aspect-auto md:rounded-xl"
            defaultSize="100%"
            minSize="30%"
          >
            <BlockViewerIframe styleName={styleName} />
          </ResizablePanel>
          <ResizableHandle className="after:bg-border relative hidden w-3 bg-transparent p-0 after:absolute after:top-1/2 after:right-0 after:h-8 after:w-[6px] after:translate-x-[-1px] after:-translate-y-1/2 after:rounded-full after:transition-all after:hover:h-10 md:block" />
          <ResizablePanel defaultSize="0%" minSize="0%" />
        </ResizablePanelGroup>
      </div>
    </div>
  )
}