DocPage() — ui Function Reference

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

Function tsx ComponentRegistry Styles calls 1

Entity Profile

ComponentRegistry→ Styles→ DocPage() — ui Function Reference

Dependency Diagram

graph TD
  3d1a55c0_d463_be68_ad2a_24cdd8fcc49b["DocPage()"]
  d12badbf_b4db_399b_fcae_754c0f8acbd9["page.tsx"]
  3d1a55c0_d463_be68_ad2a_24cdd8fcc49b -->|defined in| d12badbf_b4db_399b_fcae_754c0f8acbd9
  b27919a1_9980_ff8b_df72_80b21f8462ac["getDocFromParams()"]
  3d1a55c0_d463_be68_ad2a_24cdd8fcc49b -->|calls| b27919a1_9980_ff8b_df72_80b21f8462ac
  style 3d1a55c0_d463_be68_ad2a_24cdd8fcc49b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/docs/[[...slug]]/page.tsx lines 84–154

export default async function DocPage({ params }: DocPageProps) {
  const doc = await getDocFromParams({ params })

  if (!doc) {
    notFound()
  }

  const toc = await getTableOfContents(doc.body.raw)

  return (
    <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
      <div className="mx-auto w-full min-w-0 max-w-2xl">
        <div className="mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground">
          <Link href="/docs" className="truncate">
            Docs
          </Link>
          <ChevronRight className="h-3.5 w-3.5" />
          <div className="text-foreground">{doc.title}</div>
        </div>
        <div className="space-y-2">
          <h1 className={cn("scroll-m-20 text-3xl font-bold tracking-tight")}>
            {doc.title}
          </h1>
          {doc.description && (
            <p className="text-base text-muted-foreground">
              <Balancer>{doc.description}</Balancer>
            </p>
          )}
        </div>
        {doc.links ? (
          <div className="flex items-center space-x-2 pt-4">
            {doc.links?.doc && (
              <Link
                href={doc.links.doc}
                target="_blank"
                rel="noreferrer"
                className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
              >
                Docs
                <ExternalLink className="h-3 w-3" />
              </Link>
            )}
            {doc.links?.api && (
              <Link
                href={doc.links.api}
                target="_blank"
                rel="noreferrer"
                className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
              >
                API Reference
                <ExternalLink className="h-3 w-3" />
              </Link>
            )}
          </div>
        ) : null}
        <div className="pb-12 pt-8">
          <Mdx code={doc.body.code} />
        </div>
        <DocsPager doc={doc} />
      </div>
      <div className="hidden text-sm xl:block">
        <div className="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
          <div className="no-scrollbar h-full overflow-auto pb-10">
            {doc.toc && <DashboardTableOfContents toc={toc} />}
            <OpenInV0Cta className="mt-6 max-w-[80%]" />
          </div>
        </div>
      </div>
    </main>
  )
}