BlocksLayout() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ BlocksLayout() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/app/(app)/blocks/layout.tsx lines 43–79

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>
      <PageNav id="blocks">
        <BlocksNav />
        <Button
          asChild
          variant="secondary"
          size="sm"
          className="mr-7 hidden shadow-none lg:flex"
        >
          <Link href="/blocks/sidebar">Browse all blocks</Link>
        </Button>
      </PageNav>
      <div className="container-wrapper section-soft flex-1 md:py-12">
        <div className="container">{children}</div>
      </div>
    </>
  )
}