BlocksLayout() — ui Function Reference

Architecture documentation for the BlocksLayout() function in layout.tsx from the ui codebase.

Function tsx ComponentRegistry Styles

Entity Profile

ComponentRegistry→ Styles→ BlocksLayout() — ui Function Reference

Dependency Diagram

graph TD
  4c58495a_5e0a_276c_1a54_61e0e6312ef1["BlocksLayout()"]
  3e0c66a7_551a_84da_25c7_848ce0814115["layout.tsx"]
  4c58495a_5e0a_276c_1a54_61e0e6312ef1 -->|defined in| 3e0c66a7_551a_84da_25c7_848ce0814115
  style 4c58495a_5e0a_276c_1a54_61e0e6312ef1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/blocks/layout.tsx lines 44–74

export default function BlocksLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <PageHeader>
        <Announcement />
        <PageHeaderHeading>{title}</PageHeaderHeading>
        <PageHeaderDescription>{description}</PageHeaderDescription>
        <PageActions>
          <Button asChild size="sm">
            <a href="#blocks">Browse Blocks</a>
          </Button>
          <Button asChild variant="ghost" size="sm">
            <Link href="/docs/blocks">Add a block</Link>
          </Button>
        </PageActions>
      </PageHeader>
      <div id="blocks" className="border-grid scroll-mt-24 border-b">
        <div className="container-wrapper">
          <div className="container flex items-center py-4">
            <BlocksNav />
          </div>
        </div>
      </div>
      <div className="container-wrapper flex-1">{children}</div>
    </>
  )
}