From 10442f9dc8803cb602c4d5cdcad780d9f07e15fc Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Mon, 17 Apr 2023 22:34:18 +1000
Subject: [PATCH] Implemented pokedex list style

---
 src/features/Pokedex/Pokedex.tsx | 20 +++++++++++---------
 src/index.css                    |  7 +++++++
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/features/Pokedex/Pokedex.tsx b/src/features/Pokedex/Pokedex.tsx
index c3e1b0a..921a2f4 100644
--- a/src/features/Pokedex/Pokedex.tsx
+++ b/src/features/Pokedex/Pokedex.tsx
@@ -55,15 +55,17 @@ const Pokedex = () => {
       {isLoadingPokemons ? (
         <Loading />
       ) : (
-        sortedFilteredPokemonCardList.map(pokemonCard => (
-          <PokemonCard
-            key={pokemonCard.id}
-            id={pokemonCard.id}
-            name={pokemonCard.name}
-            image={pokemonCard.image}
-            types={pokemonCard.types}
-          />
-        ))
+        <div className="all__pokemons">
+          {sortedFilteredPokemonCardList.map(pokemonCard => (
+            <PokemonCard
+              key={pokemonCard.id}
+              id={pokemonCard.id}
+              name={pokemonCard.name}
+              image={pokemonCard.image}
+              types={pokemonCard.types}
+            />
+          ))}
+        </div>
       )}
     </>
   );
diff --git a/src/index.css b/src/index.css
index 7951c82..27a2bfe 100644
--- a/src/index.css
+++ b/src/index.css
@@ -44,3 +44,10 @@ code {
   align-items: center;
   justify-content: center;
 }
+
+.all__pokemons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}