ChartsLayout() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ChartsLayout() — ui Function Reference

Dependency Diagram

graph TD
  f768c276_db75_151c_aff6_86a815f06d3f["ChartsLayout()"]
  06396079_c4fc_b26c_bcda_b9184e999278["layout.tsx"]
  f768c276_db75_151c_aff6_86a815f06d3f -->|defined in| 06396079_c4fc_b26c_bcda_b9184e999278
  style f768c276_db75_151c_aff6_86a815f06d3f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/charts/layout.tsx lines 44–74

export default function ChartsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <PageHeader>
        <Announcement />
        <PageHeaderHeading>{title}</PageHeaderHeading>
        <PageHeaderDescription>{description}</PageHeaderDescription>
        <PageActions>
          <Button asChild size="sm">
            <a href="#charts">Browse Charts</a>
          </Button>
          <Button asChild variant="ghost" size="sm">
            <Link href="/docs/components/chart">Documentation</Link>
          </Button>
        </PageActions>
      </PageHeader>
      <PageNav id="charts">
        <ChartsNav />
      </PageNav>
      <div className="container-wrapper flex-1">
        <div className="container pb-6">
          <section className="theme-container">{children}</section>
        </div>
      </div>
    </>
  )
}