Remove unnecessary images asset and modified PokemonCard for using PokemonTypes component

src/components/PokemonTypes/PokemonTypes.css

@@ -0,0 +1,23 @@
+.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;
+}

src/components/PokemonTypes/PokemonTypes.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import PokemonTypes, { PokemonTypesProps } from './PokemonTypes';
+
+export default {
+  title: 'Component/PokemonTypes',
+  component: PokemonTypes,
+} as ComponentMeta<typeof PokemonTypes>;
+
+const Template: ComponentStory<typeof PokemonTypes> = (
+  args: PokemonTypesProps,
+) => <PokemonTypes {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  types: ['fire'],
+};
+
+export const bulbasaur = Template.bind({});
+bulbasaur.args = {
+  types: ['grass', 'poison'],
+};
+
+export const charizard = Template.bind({});
+charizard.args = {
+  types: ['fire', 'flying'],
+};
+
+export const threetypes = Template.bind({});
+threetypes.args = {
+  types: ['fire', 'flying', 'grass'],
+};

src/components/PokemonTypes/PokemonTypes.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { Tooltip, Zoom } from '@mui/material';
+
+import * as pokeTypeAsset from 'assets/types';
+import './PokemonTypes.css';
+
+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 interface PokemonTypesProps {
+  types: string[];
+}
+
+const PokemonTypes = ({ types }: PokemonTypesProps) => {
+  return (
+    <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>
+  );
+};
+
+export default PokemonTypes;

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>
   );