ColorsLayout() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ColorsLayout() — ui Function Reference

Dependency Diagram

graph TD
  dae4065a_2391_3096_7305_1f53a43f6cde["ColorsLayout()"]
  720ecf73_022e_63c9_feae_cacee5366280["layout.tsx"]
  dae4065a_2391_3096_7305_1f53a43f6cde -->|defined in| 720ecf73_022e_63c9_feae_cacee5366280
  style dae4065a_2391_3096_7305_1f53a43f6cde fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/colors/layout.tsx lines 42–78

export default function ColorsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      <PageHeader>
        <Announcement />
        <PageHeaderHeading>{title}</PageHeaderHeading>
        <PageHeaderDescription>{description}</PageHeaderDescription>
        <PageActions>
          <Button asChild size="sm">
            <a href="#colors">Browse Colors</a>
          </Button>
          <Button asChild variant="ghost" size="sm">
            <Link href="/docs/theming">Documentation</Link>
          </Button>
        </PageActions>
      </PageHeader>
      <div className="hidden">
        <div className="container-wrapper">
          <div className="container flex items-center justify-between gap-8 py-4">
            <ColorsNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
          </div>
        </div>
      </div>
      <div className="container-wrapper">
        <div className="container py-6">
          <section id="colors" className="scroll-mt-20">
            {children}
          </section>
        </div>
      </div>
    </div>
  )
}