From 2d539b2e6134403f33c92bb235d440fdb4527155 Mon Sep 17 00:00:00 2001
From: rincon-orlando <70172681+rincon-orlando@users.noreply.github.com>
Date: Tue, 26 Jan 2021 22:19:43 -0600
Subject: [PATCH] initial commit

---
 .gitignore                 |  2 ++
 README.md                  |  2 +-
 src/App.js                 |  9 ++++++++-
 src/components/PokeCard.js | 21 +++++++++++++++++++++
 4 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..919cc17
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.DS_Store
diff --git a/README.md b/README.md
index 03c7f7c..5aca52d 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ In this Codesandbox, you have a complete environment with all you need to run yo
    HTML tag to show them (_sprites_ property from the mock object contains them)
 
 6. Create a link to the Pokemon's video so when you click it, redirects you to the video
-   on YouTube using the anchor _<a src=...>_ HTML tag
+   on YouTube using the anchor _<a href=...>_ HTML tag
 
 ## Submitting your work
 
diff --git a/src/App.js b/src/App.js
index 6fd1528..32d1c24 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,17 @@
 import React from "react";
 import "./styles.css";
+import { PokeCard } from "./components/PokeCard";
+import { mockPokemonData as pokeData } from "./mock/pokeData";
 
 export default function App() {
   return (
     <div className="App">
-      <h1>Welcome to your second mini challenge!</h1>
+      <PokeCard
+        name={pokeData.name}
+        img_default={pokeData.sprites.front_default}
+        img_shiny={pokeData.sprites.front_shiny}
+        video={pokeData.video}
+      />
     </div>
   );
 }
diff --git a/src/components/PokeCard.js b/src/components/PokeCard.js
index e69de29..3413c0b 100644
--- a/src/components/PokeCard.js
+++ b/src/components/PokeCard.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+export class PokeCard extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>{this.props.name}</h1>
+        <img
+          src={this.props.img_default}
+          alt={this.props.name + " default image"}
+        />
+        <img
+          src={this.props.img_shiny}
+          alt={this.props.name + " shiny image"}
+        />
+         <p />
+        <a href={this.props.video}>Video</a>
+      </div>
+    );
+  }
+}