Created PokeCard component

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-challenge-2-template-forked",
+  "name": "mike-react-challenge",
   "version": "1.0.0",
   "description": "",
   "keywords": [],

src/App.js

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

src/components/PokeCard.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+const SHINY_LABEL = "shiny";
+const DEFAULT_LABEL = "default";
+
+const PokeCard = ({ name, sprites, video }) => {
+  const [isShiny, setIsShiny] = useState(false);
+
+  const getPokemonImage = () =>
+    isShiny ? sprites.front_shiny : sprites.front_default;
+
+  return (
+    <div className="card">
+      <h1>{name}</h1>
+      <div className="button-row">
+        <button onClick={() => setIsShiny(false)}>{DEFAULT_LABEL}</button>
+        <button onClick={() => setIsShiny(true)}>{SHINY_LABEL}</button>
+      </div>
+      <a href={video}>
+        <img className="card-img" src={getPokemonImage()} alt="default" />
+      </a>
+    </div>
+  );
+};
+
+export default PokeCard;

src/styles.css

@@ -2,3 +2,46 @@
   font-family: sans-serif;
   text-align: center;
 }
+
+h1 {
+  margin: 0px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 160px;
+  border: 2px solid black;
+  border-radius: 8px;
+  padding: 8px;
+  user-select: none;
+}
+
+.card-img {
+  height: 96px;
+  width: 96px;
+}
+
+.button-row {
+  display: flex;
+  width: 100%;
+  margin: 8px 0px;
+  justify-content: space-evenly;
+}
+
+.button-row > button {
+  outline: none;
+  cursor: pointer;
+  border: 1px solid black;
+  border-radius: 16px;
+  background-color: white;
+  width: 40%;
+  transition: 0.6s ease;
+}
+
+.button-row > button:hover {
+  background-color: black;
+  color: white;
+}