ThemesLayout() — ui Function Reference

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

Function tsx ComponentRegistry Styles

Entity Profile

ComponentRegistry→ Styles→ ThemesLayout() — ui Function Reference

Dependency Diagram

graph TD
  800d506f_fe9f_5b94_01d9_136652a47f86["ThemesLayout()"]
  2dbbc828_90a0_ad20_8b3c_942d74931976["layout.tsx"]
  800d506f_fe9f_5b94_01d9_136652a47f86 -->|defined in| 2dbbc828_90a0_ad20_8b3c_942d74931976
  style 800d506f_fe9f_5b94_01d9_136652a47f86 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/themes/layout.tsx lines 41–72

export default function ThemesLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <PageHeader>
        <Announcement />
        <PageHeaderHeading>{title}</PageHeaderHeading>
        <PageHeaderDescription>{description}</PageHeaderDescription>
        <div className="mt-2 rounded-full bg-blue-600 px-3 py-1 text-xs text-white">
          New Theme Editor coming soon
        </div>
      </PageHeader>
      <div id="themes" className="border-grid scroll-mt-24 border-b">
        <div className="container-wrapper">
          <div className="container flex items-center py-4">
            <Customizer />
          </div>
        </div>
      </div>
      <div className="container-wrapper">
        <div className="container py-6">
          <section id="themes" className="scroll-mt-20">
            {children}
          </section>
        </div>
      </div>
    </>
  )
}