Remove unnecessary images asset and modified PokemonCard for using PokemonTypes component

src/features/Pokedex/PokemonCard/PokemonCard.css

@@ -96,30 +96,6 @@ h3 {
   justify-content: space-between;
 }
 
-.poke__type {
-  display: flex;
-  grid-gap: 0 10px;
-  gap: 0 20px;
-  align-items: center;
-  justify-content: center;
-  margin-top: 30px;
-}
-
-.poke__type__bg > img {
-  width: 20px;
-  height: 20px;
-}
-
-.poke__type__bg {
-  width: 40px;
-  height: 40px;
-  border-radius: 100%;
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-}
-
 .grass {
   background: var(--grass);
   box-shadow: 0 0 20px var(--grass);

src/features/Pokedex/PokemonCard/PokemonCard.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import 'react-lazy-load-image-component/src/effects/blur.css';
-import { Tooltip, Zoom } from '@mui/material';
 
 import './PokemonCard.css';
-import * as pokeTypeAsset from './assets';
 import { colorTypeGradients } from './utils';
+import PokemonTypes from 'components/PokemonTypes/PokemonTypes';
 
 export interface PokemonCardProps {
   id: number;
@@ -18,49 +17,6 @@ export function formatNumber(num: number) {
   return '#' + num.toString().padStart(3, '0');
 }
 
-function findPokeTypeAsset(pokeType: string) {
-  switch (pokeType) {
-    case 'normal':
-      return pokeTypeAsset.pokeType_normal;
-    case 'fire':
-      return pokeTypeAsset.pokeType_fire;
-    case 'water':
-      return pokeTypeAsset.pokeType_water;
-    case 'electric':
-      return pokeTypeAsset.pokeType_electric;
-    case 'grass':
-      return pokeTypeAsset.pokeType_grass;
-    case 'ice':
-      return pokeTypeAsset.pokeType_ice;
-    case 'fighting':
-      return pokeTypeAsset.pokeType_fighting;
-    case 'poison':
-      return pokeTypeAsset.pokeType_poison;
-    case 'ground':
-      return pokeTypeAsset.pokeType_ground;
-    case 'flying':
-      return pokeTypeAsset.pokeType_flying;
-    case 'psychic':
-      return pokeTypeAsset.pokeType_psychic;
-    case 'bug':
-      return pokeTypeAsset.pokeType_bug;
-    case 'rock':
-      return pokeTypeAsset.pokeType_rock;
-    case 'ghost':
-      return pokeTypeAsset.pokeType_ghost;
-    case 'dragon':
-      return pokeTypeAsset.pokeType_dragon;
-    case 'dark':
-      return pokeTypeAsset.pokeType_dark;
-    case 'steel':
-      return pokeTypeAsset.pokeType_steel;
-    case 'fairy':
-      return pokeTypeAsset.pokeType_fairy;
-    default:
-      return pokeTypeAsset.pokeType_normal;
-  }
-}
-
 export default function PokemonCard({
   id,
   name,
@@ -111,15 +67,7 @@ export default function PokemonCard({
       </div>
       <div className="poke__name">
         <h3>{name}</h3>
-        <div className="poke__type">
-          {types.map(type => (
-            <Tooltip title={type} key={type} TransitionComponent={Zoom} arrow>
-              <div className={`poke__type__bg ${type}`}>
-                <img src={findPokeTypeAsset(type)} alt={type} />
-              </div>
-            </Tooltip>
-          ))}
-        </div>
+        <PokemonTypes types={types} />
       </div>
     </div>
   );

src/features/Pokedex/PokemonCard/assets/index.ts

@@ -1,18 +0,0 @@
-export { default as pokeType_bug } from './bug.png';
-export { default as pokeType_dark } from './dark.png';
-export { default as pokeType_dragon } from './dragon.png';
-export { default as pokeType_electric } from './electric.png';
-export { default as pokeType_fairy } from './fairy.png';
-export { default as pokeType_fighting } from './fighting.png';
-export { default as pokeType_fire } from './fire.png';
-export { default as pokeType_flying } from './flying.png';
-export { default as pokeType_ghost } from './ghost.png';
-export { default as pokeType_grass } from './grass.png';
-export { default as pokeType_ground } from './ground.png';
-export { default as pokeType_ice } from './ice.png';
-export { default as pokeType_normal } from './normal.png';
-export { default as pokeType_poison } from './poison.png';
-export { default as pokeType_psychic } from './psychic.png';
-export { default as pokeType_rock } from './rock.png';
-export { default as pokeType_steel } from './steel.png';
-export { default as pokeType_water } from './water.png';