BlockViewerView() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives calls 1

Entity Profile

ComponentRegistry→ UIPrimitives→ BlockViewerView() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

deprecated/www/components/block-viewer.tsx lines 235–276

function BlockViewerView() {
  const { item, style, resizablePanelRef } = useBlockViewer()

  return (
    <div className="group-data-[view=code]/block-view-wrapper:hidden md:h-[--height]">
      <div className="grid w-full gap-4">
        <ResizablePanelGroup direction="horizontal" className="relative z-10">
          <ResizablePanel
            ref={resizablePanelRef}
            className="relative aspect-[4/2.5] rounded-xl border bg-background md:aspect-auto"
            defaultSize={100}
            minSize={30}
          >
            <Image
              src={`/r/styles/${style}/${item.name}-light.png`}
              alt={item.name}
              data-block={item.name}
              width={1440}
              height={900}
              className="object-cover dark:hidden md:hidden md:dark:hidden"
            />
            <Image
              src={`/r/styles/${style}/${item.name}-dark.png`}
              alt={item.name}
              data-block={item.name}
              width={1440}
              height={900}
              className="hidden object-cover dark:block md:hidden md:dark:hidden"
            />
            <iframe
              src={`/view/styles/${style}/${item.name}`}
              height={item.meta?.iframeHeight ?? 930}
              className="relative z-20 hidden w-full bg-background md:block"
            />
          </ResizablePanel>
          <ResizableHandle className="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 md:block" />
          <ResizablePanel defaultSize={0} minSize={0} />
        </ResizablePanelGroup>
      </div>
    </div>
  )
}