From bc23fe815cd59be276cb5dbd37d0ecf74bba2084 Mon Sep 17 00:00:00 2001
From: roger-mike <61989986+roger-mike@users.noreply.github.com>
Date: Thu, 21 Jan 2021 16:59:21 -0600
Subject: [PATCH] initial commit

---
 package.json               |  2 +-
 src/App.js                 |  4 +++-
 src/components/PokeCard.js | 25 ++++++++++++++++++++++
 src/styles.css             | 43 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 528efea..bb2fae9 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-challenge-2-template-forked",
+  "name": "mike-react-challenge",
   "version": "1.0.0",
   "description": "",
   "keywords": [],
diff --git a/src/App.js b/src/App.js
index 6fd1528..1480d42 100644
--- a/src/App.js
+++ b/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>
   );
 }
diff --git a/src/components/PokeCard.js b/src/components/PokeCard.js
index e69de29..b3670f1 100644
--- a/src/components/PokeCard.js
+++ b/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;
diff --git a/src/styles.css b/src/styles.css
index 59b0604..a1015fc 100644
--- a/src/styles.css
+++ b/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;
+}