added some fields

ppaul · Oct 3, 2021 · d9a5cd1 · d9a5cd1
1 parent 32d3f2e
commit d9a5cd1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/app/src/components/pokemon-list/pokemon-list.jsx b/app/src/components/pokemon-list/pokemon-list.jsx
@@ -34,17 +34,28 @@ const pokemonListStyle = css`
 const pokemonStyle = css`
  margin: 20px;
  color: white;
- width: 200px;
- height: 300px;
+ width: 150px;
+ height: 210px;
  border: 1px solid grey;
 `;
 
+const pokemonNameStyle = css`
+ font-size: 24px;
+ font-weight: bold;
+`;
+
 const PokemonDetails = ({ details }) => {
- const { color, name } = details;
+ const { color, id, name, sprites, types } = details;
 
  return (
  <div css={pokemonStyle} style={{ background: color }}>
- <h2>{name}</h2>
+ <div css={pokemonNameStyle}>{name}</div>
+ <div>{id}</div>
+ {sprites?.front_default && (
+ <img src={sprites.front_default} alt="missing pic" />
+ )}
+ <div>Types</div>
+ {types.map(({ type }) => type.name).join(", ")}
  </div>
  );
 };

diff --git a/app/src/components/pokemon/pokemon.jsx b/app/src/components/pokemon/pokemon.jsx
@@ -22,6 +22,7 @@ const Pokemon = () => {
  return (
  <div>
  <h1>{name}</h1>
+ <h6>{id}</h6>
  {abilities?.length && (
  <>
  <div>