Change number in PokemonCardProps to id

src/features/Pokedex/Pokedex.tsx

@@ -56,8 +56,8 @@ const Pokedex = () => {
         sortedFilteredPokemonList.map(pokemon => (
           <PokemonCard
             key={pokemon.id}
+            id={pokemon.id}
             name={pokemon.name}
-            number={pokemon.id}
             image={pokemon.sprites.other.dream_world.front_default}
             types={pokemon.types.map(type => type.type.name)}
           />

src/features/Pokedex/PokemonCard/PokemonCard.stories.tsx

@@ -19,16 +19,16 @@ const Template: ComponentStory<typeof PokemonCard> = (
 export const Primary = Template.bind({});
 
 Primary.args = {
+  id: 6,
   name: charizard_info.name,
-  number: 6,
   image: charizard_svg,
   types: ['fire', 'flying'],
 };
 
 export const Charizard = Template.bind({});
 Charizard.args = {
+  id: 6,
   name: charizard_info.name,
-  number: 6,
   image: charizard_svg,
   types: ['fire', 'flying'],
 };

src/features/Pokedex/PokemonCard/PokemonCard.tsx

@@ -6,8 +6,8 @@ import * as pokeTypeAsset from './assets';
 import { colorTypeGradients } from './utils';
 
 export interface PokemonCardProps {
+  id: number;
   name: string;
-  number: number;
   image: string;
   types: string[];
 }
@@ -60,8 +60,8 @@ function findPokeTypeAsset(pokeType: string) {
 }
 
 export default function PokemonCard({
+  id,
   name,
-  number,
   image,
   types,
 }: PokemonCardProps) {
@@ -81,7 +81,7 @@ export default function PokemonCard({
       }}
     >
       <div className="card__header">
-        <div className="poke__number">{formatNumber(number)}</div>
+        <div className="poke__number">{formatNumber(id)}</div>
         <div className="info__icon">
           <svg
             stroke="currentColor"