Update images and refactor code

src/components/ListPokemon/index.tsx

@@ -26,18 +26,13 @@ export const ListPokemon = ({ data }: ListProps) => {
           {currentItems.map((pokemon) => {
             return (
               <PokemonCard
-                key={pokemon.data.order}
-                order={pokemon.data.order}
+                key={pokemon.data.id}
+                id={pokemon.data.id}
                 name={getFirstLetterCapitalized(pokemon.data.name)}
-                abilities={{
-                  ability_1: pokemon.data.abilities[0]?.ability.name,
-                  ability_2: pokemon.data.abilities[1]?.ability.name,
-                }}
-                types={{
-                  type_1: pokemon.data.types[0].type.name,
-                  type_2: pokemon.data.types[1]?.type.name,
-                }}
-                url_img={pokemon.data.sprites.front_default}
+                types={pokemon.data.types}
+                url_img={
+                  pokemon.data.sprites.other['official-artwork'].front_default
+                }
               />
             );
           })}

src/components/PokemonCard/index.tsx

@@ -9,12 +9,12 @@ import {
 } from '../../utils/getTheme';
 import { TypeCard } from './TypeCard';
 
-export const PokemonCard = ({ name, order, types, url_img }: IPokemonCard) => {
+export const PokemonCard = ({ name, id, types, url_img }: IPokemonCard) => {
   return (
     <li
       style={{
-        backgroundColor: types.type_1
-          ? getTypesToBackgroundColor(types.type_1.toUpperCase())
+        backgroundColor: types[0].type.name
+          ? getTypesToBackgroundColor(types[0].type.name.toUpperCase())
           : '#9d9b9b',
       }}
       className="w-[200px] h-[160px] flex justify-between rounded-3xl p-2 m-1 text-white duration-500 cursor-pointer hover:shadow-md hover:shadow-slate-400 hover:brightness-100 hover:-translate-y-1 animate-reveal"
@@ -23,18 +23,19 @@ export const PokemonCard = ({ name, order, types, url_img }: IPokemonCard) => {
         <div className="flex flex-col">
           <h3 className="font-black line-clamp-1 text-sm">{name}</h3>
           <span className="font-semibold text-xs">
-            {getNumberOrderFormat(order)}
+            {getNumberOrderFormat(id)}
           </span>
         </div>
         <div className="pt-2 font-semibold text-[10px]">
-          <TypeCard
-            icon={`${types.type_1 && getTypesToIconsTypes(types.type_1.toUpperCase())}`}
-            type={types.type_1}
-          />
-          {types.type_2 && <TypeCard
-            icon={`${types.type_2 && getTypesToIconsTypes(types.type_2.toUpperCase())}`}
-            type={types.type_2}
-          />}
+          {types.map((type) => {
+            return (
+              <TypeCard
+                key={type.type.name}
+                icon={`${type.type.name && getTypesToIconsTypes(type.type.name.toUpperCase())}`}
+                type={type.type.name}
+              />
+            )
+          })}
         </div>
       </div>
       <div className="flex items-center h-full w-full">

src/hooks/usePokemons.ts

@@ -9,6 +9,8 @@ export const useGetPokemonsData = () => {
   const [loading, setLoading] = useState(false);
   const [pokemons, setPokemons] = useState<IPokemons[]>([]);
 
+  // console.log(pokemons);
+
   useEffect(() => {
     setLoading(true);
     getPokemons().finally(() => setLoading(false));

src/interfaces/pokemonCard.ts

@@ -1,13 +1,22 @@
 export interface IPokemonCard {
-  order: number;
+  id: number;
   name: string;
   url_img: string;
   types: {
-    type_1: string;
-    type_2?: string;
-  };
-  abilities: {
-    ability_1: string;
-    ability_2: string;
-  };
+    type: {
+      name: string;
+    };
+  }[];
+  abilities?: {
+    ability: {
+      name: string;
+    };
+  }[];
+  stats?: {
+    base_stat: number;
+    effort: number;
+    stat: {
+      name: string;
+    };
+  }[];
 }

src/interfaces/pokemons.ts

@@ -2,16 +2,52 @@ export interface IPokemons {
   data: {
     id: number;
     name: string;
-    order: number;
-    sprites: {
-      back_default: string;
-      back_shiny: string;
+    sprites: ISprites;
+    types: {
+      type: {
+        name: string;
+      };
+    }[];
+    abilities: {
+      ability: {
+        name: string;
+      };
+    }[];
+    weight: number;
+    height: number;
+    stats: {
+      base_stat: number;
+      effort: number;
+      stat: {
+        name: string;
+      };
+    }[];
+  };
+}
+
+interface ISprites {
+  front_default: string;
+  front_shiny: string;
+  other: {
+    dream_world: {
+      front_default: string;
+      front_female: string | null;
+    };
+    home: {
       front_default: string;
       front_shiny: string;
     };
-    types: [{ type: { name: string } }, { type: { name: string } }];
-    abilities: [{ ability: { name: string } }, { ability: { name: string } }];
-    weight: number;
-    height: number;
+    'official-artwork': {
+      front_default: string;
+    };
+  };
+  versions: {
+    'generation-v': {
+      'black-white': {
+        animated: {
+          front_default: string;
+        };
+      };
+    };
   };
 }