Refactor colorTypeGradients method again to receive types string list directly

src/components/EvolutionSpecies/EvolutionSpecies.tsx

@@ -2,7 +2,7 @@ import { motion } from 'framer-motion';
 
 import './EvolutionSpecies.css';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
-import { colorTypeGradients } from '../PokemonCard/utils';
+import { colorTypeGradients } from 'components/utils';
 
 export interface EvolutionSpeciesProps {
   types: string[];
@@ -10,12 +10,7 @@ export interface EvolutionSpeciesProps {
 }
 
 const EvolutionSpecies = ({ types, image_url }: EvolutionSpeciesProps) => {
-  let finalColor;
-  if (types.length === 2) {
-    finalColor = colorTypeGradients(types[0], types[1], types.length);
-  } else {
-    finalColor = colorTypeGradients(types[0], types[0], types.length);
-  }
+  const finalColor = colorTypeGradients(types);
 
   return (
     <div className={'evolution__sub__box'}>

src/components/PokemonCard/PokemonCard.tsx

@@ -3,7 +3,7 @@ import { LazyLoadImage } from 'react-lazy-load-image-component';
 import 'react-lazy-load-image-component/src/effects/blur.css';
 
 import './PokemonCard.css';
-import { colorTypeGradients } from './utils';
+import { colorTypeGradients } from 'components/utils';
 import PokemonTypes from 'components/PokemonTypes/PokemonTypes';
 
 export interface PokemonCardProps {
@@ -18,13 +18,7 @@ export function formatNumber(num: number) {
 }
 
 const PokemonCard = ({ id, name, image, types }: PokemonCardProps) => {
-  let finalColor;
-
-  if (types.length === 2) {
-    finalColor = colorTypeGradients(types[0], types[1], types.length);
-  } else {
-    finalColor = colorTypeGradients(types[0], types[0], types.length);
-  }
+  const finalColor = colorTypeGradients(types);
 
   return (
     <div

src/components/utils.ts

@@ -63,17 +63,12 @@ const getColor = (type: string) => {
   return returnColor;
 };
 
-export const colorTypeGradients = (
-  type1: string,
-  type2: string,
-  length: number,
-) => {
+export const colorTypeGradients = (types: string[]) => {
   let color2;
+  const color1 = getColor(types[0]);
 
-  const color1 = getColor(type1);
-
-  if (length === 2) {
-    color2 = getColor(type2);
+  if (types.length === 2) {
+    color2 = getColor(types[1]);
   } else if (length === 1) {
     color2 = color1;
   }