MailPage() — ui Function Reference

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

Function tsx ComponentRegistry Styles

Entity Profile

ComponentRegistry→ Styles→ MailPage() — ui Function Reference

Dependency Diagram

graph TD
  59852f56_eaf6_9876_8bff_20a0ff34dc04["MailPage()"]
  c4d3907c_7478_f794_ee88_edb3b56051fb["page.tsx"]
  59852f56_eaf6_9876_8bff_20a0ff34dc04 -->|defined in| c4d3907c_7478_f794_ee88_edb3b56051fb
  style 59852f56_eaf6_9876_8bff_20a0ff34dc04 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/examples/mail/page.tsx lines 7–43

export default function MailPage() {
  const layout = cookies().get("react-resizable-panels:layout:mail")
  const collapsed = cookies().get("react-resizable-panels:collapsed")

  const defaultLayout = layout ? JSON.parse(layout.value) : undefined
  const defaultCollapsed = collapsed ? JSON.parse(collapsed.value) : undefined

  return (
    <>
      <div className="md:hidden">
        <Image
          src="/examples/mail-dark.png"
          width={1280}
          height={727}
          alt="Mail"
          className="hidden dark:block"
        />
        <Image
          src="/examples/mail-light.png"
          width={1280}
          height={727}
          alt="Mail"
          className="block dark:hidden"
        />
      </div>
      <div className="hidden flex-col md:flex">
        <Mail
          accounts={accounts}
          mails={mails}
          defaultLayout={defaultLayout}
          defaultCollapsed={defaultCollapsed}
          navCollapsedSize={4}
        />
      </div>
    </>
  )
}