ThemesLayout() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ThemesLayout() — ui Function Reference

Dependency Diagram

graph TD
  8c2dfa93_3aa2_e336_0ec2_74e5e3f95995["ThemesLayout()"]
  132ecbb0_ef01_ba79_a682_5b4aaf1c77cc["layout.tsx"]
  8c2dfa93_3aa2_e336_0ec2_74e5e3f95995 -->|defined in| 132ecbb0_ef01_ba79_a682_5b4aaf1c77cc
  style 8c2dfa93_3aa2_e336_0ec2_74e5e3f95995 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/themes/layout.tsx lines 41–64

export default function ThemesLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      <PageHeader>
        <Announcement />
        <PageHeaderHeading>{title}</PageHeaderHeading>
        <PageHeaderDescription>{description}</PageHeaderDescription>
        <PageActions>
          <Button asChild size="sm">
            <a href="#themes">Browse Themes</a>
          </Button>
          <Button asChild variant="ghost" size="sm">
            <Link href="/docs/theming">Documentation</Link>
          </Button>
        </PageActions>
      </PageHeader>
      {children}
    </div>
  )
}