Function PokemonDex

examples/solid/astro/src/components/SolidApp.tsx:74–189

(props: { id: string })

}

const PokemonDex = (props: { id: string }) => {
  const pokemon = useQuery(() => ({
    queryKey: ['pokemon', props.id],
    queryFn: async () => {
      const res = await fetch(
        `https://pokeapi.co/api/v2/pokemon/${props.id}`,
      ).then((res) => res.json())
      return res
    },
    placeholderData: keepPreviousData,
  }))

  const pokemon_stats = useQuery(() => ({
    queryKey: ['pokemon', props.id],
    queryFn: async () => {
      const res = await fetch(
        `https://pokeapi.co/api/v2/pokemon/${props.id}`,
      ).then((res) => res.json())

      return res
    },
    select(data) {
      const nameMap = {
        hp: 'HP',
        attack: 'Attack',
        defense: 'Defense',
        'special-attack': 'Special Attack',
        'special-defense': 'Special Defense',
        speed: 'Speed',
      }
      const stats = data.stats.map((stat: any) => ({
        name: nameMap[stat.stat.name as keyof typeof nameMap],
        value: stat.base_stat,
      }))
      return stats as { name: string; value: number }[]
    },
    placeholderData: keepPreviousData,
    reconcile: 'name',
  }))

  const is_server_rendered = useQuery(() => ({
    queryKey: ['is_server_rendered', props.id],
    queryFn: () => {
      if (isServer) return true
      return false
    },
    placeholderData: keepPreviousData,
  }))

  return (
    <div class="flex flex-col flex-1">
      <Show when={pokemon.data}>
        <div class="flex justify-center text-3xl font-semibold py-4">
          {properCase(pokemon.data.name)}
        </div>
        <div class="flex justify-center">
          <div class="h-64 w-64 rounded-lg relative overflow-hidden border">
            <img