Mail Example Page

In this lesson, we are only focusing on the folder structure, file naming conventions and how the Mail Example Page is built.

Mail Example Page

This Mail Example Page source code is found at www/app/(app)/examples/mail.

Components imported

The following components are imported in the mail page, found at www/app/(app)/examples/mail.

import { Mail } from "@/app/(app)/examples/mail/components/mail"
import { accounts, mails } from "@/app/(app)/examples/mail/data"

There are few observations that can be made here:

• Mail component Mail component seems to be imported from mail/components. What does this tell you? components specific to a page are colocated with in examples/mail folder. In the previous lesson, we mentioned about components folder that contains components that can be used across the app.

There are some more components imported in www/app/(app)/examples/mail/components/mail

import { cn } from "@/lib/utils"
import { Input } from "@/registry/new-york/ui/input"
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/registry/new-york/ui/resizable"
import { Separator } from "@/registry/new-york/ui/separator"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/registry/new-york/ui/tabs"
import { TooltipProvider } from "@/registry/new-york/ui/tooltip"
import { AccountSwitcher } from "@/app/(app)/examples/mail/components/account-switcher"
import { MailDisplay } from "@/app/(app)/examples/mail/components/mail-display"
import { MailList } from "@/app/(app)/examples/mail/components/mail-list"
import { Nav } from "@/app/(app)/examples/mail/components/nav"
import { type Mail } from "@/app/(app)/examples/mail/data"
import { useMail } from "@/app/(app)/examples/mail/use-mail"

Remember, our focus is on folder structure.

• @/registry/new-york/ui: @/registry/new-york/ui is used in the shadcn-ui/ui codebase to reuse ui blocks. this ui folder is automatically generated when you install shadcn-ui/ui via CLI

• examples/mail/components/ folder: This folder contains the following files:

1. account-switcher.tsx
2. mail-display.tsx
3. mail-list.tsx
4. mail.tsx
5. nav.tsx

mail.tsx is the base of MailPage as it imports the other building blocks/components to form the Mail Page.

• data folder This data file contains static data that is used in Mail Example page. You could write your server data fetching actions in a file like this that is specific to a page, colocated with in a folder, like in this case "mail" as this is related to Mail page.

• use-mail.ts custom hook: You will also a find a custom hook, use-mail.ts This hook uses Jotai to manage state.