pokemoning typing will now display specific colors

my-pokedex/src/App.js

-import { Dex } from './features/dex';
+import  Dex  from './features/dex';
 import './App.css';
 
 function App() {

my-pokedex/src/features/dex.js

 
 import React, { useState, useEffect } from "react";
+import styles from './dexstyle.css';
 import Card from 'react-bootstrap/Card'
 import ProgressBar from 'react-bootstrap/ProgressBar'
 
@@ -13,25 +14,42 @@ function Pokemon(name, typing, moves, abilities, stats, artwork) {
   this.artwork = artwork;
 }
 
-function PokemonCard(props) {
-  return (
-    <>
-      <label>
-        {props.name}
-      </label>
-      <button>
-        info
-      </button>
 
-    </>
 
-  );
-}
 
-export function Dex() {
+export default function Dex() {
   
   const [listofpokemon, setlistofpokemon] = useState([]);
   const [disable, setDisable] = useState(false);
+  const colors = {
+    normal: 'cornsilk',
+    grass: 'green',
+    fire: 'red',
+    water: 'blue',
+    electric: 'yellow',
+    ice: 'darkturquoise',
+    fighting: 'firebrick',
+    poison: 'darkmagenta',
+    ground: 'tan',
+    rock: 'sienna',
+    flying: 'silver',
+    steel: 'slategrey',
+    psychic: 'deeppink',
+    bug: 'yellowgreen',
+    ghost: 'darkslateblue',
+    dark: 'darkslategrey',
+    dragon: 'royalblue',
+    fairy: 'thistle'
+   }
+   function getTyping(types){
+      if( types.length === 1) {
+        return colors[types[0].type.name];
+      }else {
+        return 'linear-gradient(to left,'+types.map(type=> colors[type.type.name]).join()+')';
+      }
+    }
+      
+    
   
   // useEffect ( () => {
   //   pokemonFetcher();
@@ -64,18 +82,19 @@ export function Dex() {
         <ul>
         { listofpokemon.length > 0 ?
         listofpokemon.map((pokemon) => (
-          <>
+          <li key={pokemon.id}>
             <Card style={{ width: '18rem' }}
             > 
+            <Card.Header>{pokemon.name}</Card.Header>
             <Card.Img variant="top" src={pokemon.sprites.front_default} />
             <Card.Body>
-             <Card.Title>{pokemon.name}</Card.Title>
-             <Card.Text>
+             <Card.Title style={{background: getTyping(pokemon.types)}}>
             { pokemon.types.length > 1 ?
-                `${pokemon.types[0].type.name}, ${pokemon.types[1].type.name}`
+                `${pokemon.types[0].type.name}  ${pokemon.types[1].type.name}`
                 : `${pokemon.types[0].type.name}`
                } 
-               <br/>
+               </Card.Title>
+             <Card.Text>
                { `health points:` }
                <ProgressBar now={pokemon.stats[0].base_stat} max={200} label={`${pokemon.stats[0].base_stat}`}/> <br/>
                {`attack:`}
@@ -95,7 +114,7 @@ export function Dex() {
             
             </Card>
             
-          </>
+          </li>
           
         ))
         : null}

my-pokedex/src/features/dexstyle.css

+.cardtitle {
+  background: linear-gradient(to left, cornsilk 50%, #0000ff 50%);
+}
+