CreatePage() — ui Function Reference

Architecture documentation for the CreatePage() function in page.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ CreatePage() — ui Function Reference

Dependency Diagram

graph TD
  65654689_db32_4796_5d2e_e7dcd4f2c1bb["CreatePage()"]
  9ea32b2e_132c_ed99_cfcd_0b42540a5ae7["page.tsx"]
  65654689_db32_4796_5d2e_e7dcd4f2c1bb -->|defined in| 9ea32b2e_132c_ed99_cfcd_0b42540a5ae7
  style 65654689_db32_4796_5d2e_e7dcd4f2c1bb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/create/page.tsx lines 63–148

export default async function CreatePage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}) {
  const params = await loadDesignSystemSearchParams(searchParams)
  const base = BASES.find((b) => b.name === params.base) ?? BASES[0]

  const pageTree = source.pageTree
  const items = await getItemsForBase(base.name)

  const filteredItems = items
    .filter((item) => item !== null)
    .map((item) => ({
      name: item.name,
      title: item.title,
      type: item.type,
    }))
    .filter((item) => !/\d+$/.test(item.name))

  return (
    <div
      data-slot="layout"
      className="section-soft relative z-10 flex min-h-svh flex-col"
    >
      <header className="sticky top-0 z-50 w-full">
        <div className="container-wrapper 3xl:fixed:px-0 px-6">
          <div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:h-4!">
            <div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:h-4!">
              <MobileNav
                tree={pageTree}
                items={siteConfig.navItems}
                className="flex lg:hidden"
              />
              <Button
                asChild
                variant="ghost"
                size="icon"
                className="hidden size-8 lg:flex"
              >
                <Link href="/">
                  <Icons.logo className="size-5" />
                  <span className="sr-only">{siteConfig.name}</span>
                </Link>
              </Button>
              <MainNav items={siteConfig.navItems} className="hidden lg:flex" />
            </div>
            <div className="fixed inset-x-0 bottom-0 ml-auto flex flex-1 items-center justify-end gap-2 px-4.5 pb-4 sm:static sm:p-0 lg:ml-0">
              <ItemPicker items={filteredItems} />
              <div className="items-center gap-0 sm:hidden">
                <RandomButton />
                <ResetButton />
              </div>
              <Separator orientation="vertical" className="mr-2 flex" />
            </div>
            <div className="ml-auto flex items-center gap-2 sm:ml-0 md:justify-end">
              <SiteConfig className="3xl:flex hidden" />
              <Separator orientation="vertical" className="3xl:flex hidden" />
              <ModeSwitcher />
              <Separator
                orientation="vertical"
                className="mr-0 -ml-2 sm:ml-0"
              />
              <ShareButton />
              <V0Button />
              <ToolbarControls />
            </div>
          </div>
        </div>
      </header>
      <main className="flex flex-1 flex-col pb-16 sm:pb-0">
        <SidebarProvider className="flex h-auto min-h-min flex-1 flex-col items-start overflow-hidden px-0">
          <div
            data-slot="designer"
            className="3xl:fixed:container flex w-full flex-1 flex-col gap-2 p-6 pt-1 pb-4 [--sidebar-width:--spacing(40)] sm:gap-2 sm:pt-2 md:flex-row md:pb-6 2xl:gap-6"
          >
            <ItemExplorer base={base.name} items={filteredItems} />
            <Preview />
            <Customizer />
          </div>
        </SidebarProvider>