React Pokedex

App.css

.pokemons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  max-width: 700px;
  margin: 0 auto;
}

.poke {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poke__image {
  width: 150px;
}

.poke__name {
  margin-top: 0.5rem;
}

.poke__search {
  color: #3363c4;
  font-weight: 800;
  font-size: 16px;
  padding: 0.6rem 2rem;
  margin-bottom: 2rem;
  height: auto;
  -webkit-appearance: none;
  outline: none;
  border: 3px solid #888;
  border-radius: 5px;
}

.poke__search:focus,
.poke__search:active {
  border-color: #f8c40a;
}

body {
  background-color: #336ea0;
  color: #fff;
}

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #1c2a59;
  height: 150px;
  padding: 20px;
  color: #f8c40a;
  font-weight: 900;
}

.App-title {
  font-size: 1.5em;
  margin-top: 0.6rem;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Snippets.jsx

// Api call
fetch("https://pokeapi.co/api/v2/pokemon?limit=784")
  .then(res => res.json())
  .then(res => {
    setPokemon(res.results);
    setFilteredPokemon(res.results);
  });

// get poke image from poke object
const pokeImageUrl = poke => {
 const id = poke.url.match(/.*pokemon\/(\d+)\/$/)[1];
 return `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`;
}