Creating a PokeCard component

src/App.js

@@ -1,10 +1,17 @@
 import React from "react";
+
+import { mockPokemonData } from "./mock/pokeData";
+import PokeCard from "./components/PokeCard";
 import "./styles.css";
 
 export default function App() {
+  const { sprites, name, video } = mockPokemonData;
   return (
     <div className="App">
       <h1>Welcome to your second mini challenge!</h1>
+      <div className="pokemonsContainer">
+        <PokeCard sprites={sprites} name={name} video={video} />
+      </div>
     </div>
   );
 }

src/components/PokeCard.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function PokeCard({ sprites, name, video }) {
+  return (
+    <div className="pokeCard">
+      <h1>{name}</h1>
+      <div className="pokemonImages">
+        <img src={sprites.front_default} alt="Default" />
+        <img src={sprites.front_shiny} alt="Shiny" />
+      </div>
+      <div className="pokemonControls">
+        <a href={video} target="blank">
+          Go to the video!
+        </a>
+      </div>
+    </div>
+  );
+}

src/styles.css

@@ -2,3 +2,44 @@
   font-family: sans-serif;
   text-align: center;
 }
+
+.pokeCard {
+  border: solid #ddd;
+  border-width: 1rem 0.5rem 2rem;
+  padding: 1rem;
+  margin: 1rem;
+  background-color: #18bfdc;
+  border-radius: 10px 10px 0px 30px;
+}
+
+.pokemonControls {
+  padding: 1rem;
+}
+
+.pokemonControls a {
+  color: white;
+}
+
+.pokemonControls a:hover {
+  transition: all 0.5s;
+  color: #990000;
+}
+
+.pokemonsContainer {
+  width: 80%;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.pokemonName {
+  width: 100%;
+}
+
+.pokemonImages img {
+  border-radius: 50%;
+  background-color: white;
+  border: 1px solid #eee;
+  margin: 0.5rem;
+}