Function UsersComponent

e2e/solid-start/basic-solid-query/src/routes/users.tsx:14–46

()

})

function UsersComponent() {
  const usersQuery = useQuery(() => usersQueryOptions())

  return (
    <div class="p-2 flex gap-2">
      <ul class="list-disc pl-4">
        <For
          each={[
            ...(usersQuery.data ?? []),
            { id: 'i-do-not-exist', name: 'Non-existent User', email: '' },
          ]}
        >
          {(user) => (
            <li class="whitespace-nowrap">
              <Link
                to="/users/$userId"
                params={{
                  userId: String(user.id),
                }}
                class="block py-1 text-blue-800 hover:text-blue-600"
                activeProps={{ class: 'text-black font-bold' }}
              >
                <div>{user.name}</div>
              </Link>
            </li>
          )}
        </For>
      </ul>
      <hr />
      <Outlet />
    </div>
  )
}