Added name into EvolutionSpecies component

src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx

@@ -15,6 +15,7 @@ Primary.args = {
   types: ['grass', 'poison'],
   image_url:
     'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
+  name: 'Bulbasaur',
 };
 
 export const Bulbasaur = Template.bind({});
@@ -22,6 +23,7 @@ Bulbasaur.args = {
   types: ['grass', 'poison'],
   image_url:
     'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
+  name: 'Bulbasaur',
 };
 
 export const Magneton = Template.bind({});
@@ -29,4 +31,5 @@ Magneton.args = {
   types: ['electric', 'steel'],
   image_url:
     'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/82.svg',
+  name: 'Magneton',
 };

src/components/EvolutionSpecies/EvolutionSpecies.tsx

@@ -6,10 +6,15 @@ import { colorTypeGradients } from 'components/utils';
 
 export interface EvolutionSpeciesProps {
   types: string[];
+  name: string;
   image_url: string;
 }
 
-const EvolutionSpecies = ({ types, image_url }: EvolutionSpeciesProps) => {
+const EvolutionSpecies = ({
+  types,
+  name,
+  image_url,
+}: EvolutionSpeciesProps) => {
   const finalColor = colorTypeGradients(types);
 
   return (
@@ -46,6 +51,7 @@ const EvolutionSpecies = ({ types, image_url }: EvolutionSpeciesProps) => {
             </div>
           </div>
         </motion.div>
+        <div className={'evolution__poke__name'}>{name}</div>
       </div>
     </div>
   );

src/components/EvolutionSpecies/index.ts

@@ -0,0 +1 @@
+export { default } from './EvolutionSpecies';