NotesPage() — ui Function Reference

Architecture documentation for the NotesPage() function in notes.tsx from the ui codebase.

Function tsx FrameworkTooling SchemaValidation

Entity Profile

FrameworkTooling→ SchemaValidation→ NotesPage() — ui Function Reference

Dependency Diagram

graph TD
  d98203cc_1bc0_2cac_4dc2_01ed76fcf889["NotesPage()"]
  a6b12f74_f95d_2ab0_e271_ed25f8e49373["notes.tsx"]
  d98203cc_1bc0_2cac_4dc2_01ed76fcf889 -->|defined in| a6b12f74_f95d_2ab0_e271_ed25f8e49373
  style d98203cc_1bc0_2cac_4dc2_01ed76fcf889 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/test/fixtures/frameworks/remix-indie-stack/app/routes/notes.tsx lines 15–70

export default function NotesPage() {
  const data = useLoaderData<typeof loader>();
  const user = useUser();

  return (
    <div className="flex h-full min-h-screen flex-col">
      <header className="flex items-center justify-between bg-slate-800 p-4 text-white">
        <h1 className="text-3xl font-bold">
          <Link to="">Notes</Link>
        </h1>
        <p>{user.email}</p>
        <Form action="/logout" method="post">
          <button
            type="submit"
            className="rounded bg-slate-600 px-4 py-2 text-blue-100 hover:bg-blue-500 active:bg-blue-600"
          >
            Logout
          </button>
        </Form>
      </header>

      <main className="flex h-full bg-white">
        <div className="h-full w-80 border-r bg-gray-50">
          <Link to="new" className="block p-4 text-xl text-blue-500">
            + New Note
          </Link>

          <hr />

          {data.noteListItems.length === 0 ? (
            <p className="p-4">No notes yet</p>
          ) : (
            <ol>
              {data.noteListItems.map((note) => (
                <li key={note.id}>
                  <NavLink
                    className={({ isActive }) =>
                      `block border-b p-4 text-xl ${isActive ? "bg-white" : ""}`
                    }
                    to={note.id}
                  >
                    📝 {note.title}
                  </NavLink>
                </li>
              ))}
            </ol>
          )}
        </div>

        <div className="flex-1 p-6">
          <Outlet />
        </div>
      </main>
    </div>
  );
}