userController.ts

const userController = pageController<UserSchema>(async (props) => {
  const user = await client
    .selectFrom('User')
    .selectAll()
    .where('id', '=', props.params.id)
    .executeTakeFirstOrThrow();

  return clientRoot(UserPage, decoratePageProps(props, { user }));
});

export { userController };

UserPage.tsx

function UserPage({ currentUser, user }: PageProps<{ user: User }>) {
  return (
    <Page title={user.name}>
      <div className="flex flex-row items-center gap-2">
        <Avatar url={user.avatarUrl} />
        <span className="font-bold">{user.name}</span>
        {user.id === currentUser?.id && (
          <a href={`/users/${user.id}/edit`}>Edit</a>
        )}
      </div>
    </Page>
  );
}

export { UserPage };