SettingsLayout() — ui Function Reference

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

Function tsx ComponentRegistry Styles

Entity Profile

ComponentRegistry→ Styles→ SettingsLayout() — ui Function Reference

Dependency Diagram

graph TD
  7de902ea_8360_72f0_f4c0_fe902995e35f["SettingsLayout()"]
  b10290cd_8956_8075_e18e_663d8b404c0a["layout.tsx"]
  7de902ea_8360_72f0_f4c0_fe902995e35f -->|defined in| b10290cd_8956_8075_e18e_663d8b404c0a
  style 7de902ea_8360_72f0_f4c0_fe902995e35f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/examples/forms/layout.tsx lines 39–75

export default function SettingsLayout({ children }: SettingsLayoutProps) {
  return (
    <>
      <div className="md:hidden">
        <Image
          src="/examples/forms-light.png"
          width={1280}
          height={791}
          alt="Forms"
          className="block dark:hidden"
        />
        <Image
          src="/examples/forms-dark.png"
          width={1280}
          height={791}
          alt="Forms"
          className="hidden dark:block"
        />
      </div>
      <div className="hidden space-y-6 p-10 pb-16 md:block">
        <div className="space-y-0.5">
          <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
          <p className="text-muted-foreground">
            Manage your account settings and set e-mail preferences.
          </p>
        </div>
        <Separator className="my-6" />
        <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
          <aside className="-mx-4 lg:w-1/5">
            <SidebarNav items={sidebarNavItems} />
          </aside>
          <div className="flex-1 lg:max-w-2xl">{children}</div>
        </div>
      </div>
    </>
  )
}