BlockViewerMobile() — ui Function Reference

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

Function tsx Internationalization RTLLayout calls 1

Entity Profile

Internationalization→ RTLLayout→ BlockViewerMobile() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/components/block-viewer.tsx lines 290–327

function BlockViewerMobile({ children }: { children: React.ReactNode }) {
  const { item } = useBlockViewer()

  return (
    <div className="flex flex-col gap-2 lg:hidden">
      <div className="flex items-center gap-2 px-2">
        <div className="line-clamp-1 text-sm font-medium">
          {item.description}
        </div>
        <div className="text-muted-foreground ml-auto shrink-0 font-mono text-xs">
          {item.name}
        </div>
      </div>
      {item.meta?.mobile === "component" ? (
        children
      ) : (
        <div className="overflow-hidden rounded-xl border">
          <Image
            src={`/r/styles/new-york-v4/${item.name}-light.png`}
            alt={item.name}
            data-block={item.name}
            width={1440}
            height={900}
            className="object-cover dark:hidden"
          />
          <Image
            src={`/r/styles/new-york-v4/${item.name}-dark.png`}
            alt={item.name}
            data-block={item.name}
            width={1440}
            height={900}
            className="hidden object-cover dark:block"
          />
        </div>
      )}
    </div>
  )
}