Function SideNav

examples/solid/astro/src/components/SolidApp.tsx:191–250

()

}

const SideNav = () => {
  const id = usePokemonID()

  const pokemonsList = useQuery(() => ({
    queryKey: ['pokemons'],
    queryFn: async () => {
      const res = await fetch(
        `https://pokeapi.co/api/v2/pokemon?limit=${MAX_POKEMONS}`,
      ).then((res) => res.json())
      return res as {
        results: { name: string; url: string }[]
      }
    },
    select(data) {
      return data.results.map((p) => {
        const regex = /\/pokemon\/(\d+)\/$/
        const match = p.url.match(regex)
        const id = match ? match[1] : ''
        return {
          name: properCase(p.name),
          id,
          avatar: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${id}.png`,
        }
      })
    },
    placeholderData: keepPreviousData,
    reconcile: 'id',
  }))

  const activeClass = (pokemonID: string) =>
    id() === pokemonID ? 'bg-gray-50' : 'hover:bg-gray-50'

  return (
    <div class="w-72 border-r flex flex-col px-2">
      <div class="pt-3 pb-1 text-sm font-semibold">Pokemons</div>

      <div class="flex-1 overflow-auto flex flex-col gap-1">
        <For each={pokemonsList.data}>
          {(pokemon) => (
            <Link
              class={`flex gap-2 items-center border rounded p-1 ${activeClass(
                pokemon.id,
              )}`}
              href={`./?id=${pokemon.id}`}
            >
              <span class="flex bg-zinc-100 border relative justify-center items-center overflow-hidden rounded-sm w-9 h-9 flex-shrink-0">
                <img
                  class="w-7 h-7 relative z-20"
                  src={pokemon.avatar}
                  alt={pokemon.name}
                />
              </span>
              <span>{pokemon.name}</span>
            </Link>
          )}
        </For>
      </div>
    </div>