Implemented PokemonTypes common component

src/assets/types/index.ts

@@ -0,0 +1,18 @@
+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';

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;