From 612cd89b690b169d7a881bd4af7514a9e2fe3e60 Mon Sep 17 00:00:00 2001
From: "Sean C. Mangosing" <seanmangosing@gmail.com>
Date: Fri, 5 Jan 2018 09:46:30 -0800
Subject: [PATCH] Uploading answer files

---
 .../props/sean-answer-files/App.js            | 62 +++++++++++++++++++
 .../props/sean-answer-files/Pokecard.css      | 12 ++++
 .../props/sean-answer-files/Pokecard.js       | 16 +++++
 3 files changed, 90 insertions(+)
 create mode 100644 02-props-state-component-architecture/props/sean-answer-files/App.js
 create mode 100644 02-props-state-component-architecture/props/sean-answer-files/Pokecard.css
 create mode 100644 02-props-state-component-architecture/props/sean-answer-files/Pokecard.js

diff --git a/02-props-state-component-architecture/props/sean-answer-files/App.js b/02-props-state-component-architecture/props/sean-answer-files/App.js
new file mode 100644
index 00000000..cc6d1e78
--- /dev/null
+++ b/02-props-state-component-architecture/props/sean-answer-files/App.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import './App.css';
+import Pokecard from "./Pokecard";
+
+class App extends Component {
+  render() {
+    const pokemon = this.props.pokemon.map(p => {
+      return (
+        <Pokecard 
+          key={p.id}
+          name={p.name}
+          image={p.image}
+          type={p.type}
+        />
+      )
+    })
+    return (
+      <div className="App">
+        <h1 className="App-title">Pokedex</h1>
+        {pokemon}
+      </div>
+    );
+  }
+}
+
+App.defaultProps = {
+  pokemon: [
+    {
+      id: 1,
+      name: "Charmander",
+      type: "fire",
+      image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png"
+    },
+    {
+      id: 2,
+      name: "Squirtle",
+      type: "water",
+      image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png"
+    },
+    {
+      id: 3,
+      name: "Butterfree",
+      type: "flying",
+      image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/12.png"
+    },
+    {
+      id: 4,
+      name: "Rattata",
+      type: "normal",
+      image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/19.png"
+    },
+    {
+      id: 5,
+      name: "Metapod",
+      type: "bug",
+      image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/11.png"
+    }
+  ]
+}
+
+export default App;
+
diff --git a/02-props-state-component-architecture/props/sean-answer-files/Pokecard.css b/02-props-state-component-architecture/props/sean-answer-files/Pokecard.css
new file mode 100644
index 00000000..df0e8dea
--- /dev/null
+++ b/02-props-state-component-architecture/props/sean-answer-files/Pokecard.css
@@ -0,0 +1,12 @@
+.pokecard {
+  display: inline-block;
+  max-width: 175px;
+  padding: 2em;
+  border: 1px solid lightgrey;
+  border-radius: 3px;
+  margin: 20px 5px;
+  background-color: rgb(253, 253, 253);
+  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
+}
\ No newline at end of file
diff --git a/02-props-state-component-architecture/props/sean-answer-files/Pokecard.js b/02-props-state-component-architecture/props/sean-answer-files/Pokecard.js
new file mode 100644
index 00000000..c30639e1
--- /dev/null
+++ b/02-props-state-component-architecture/props/sean-answer-files/Pokecard.js
@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import "./Pokecard.css";
+
+class PokeCard extends Component {
+    render(){
+        return(
+            <section className="pokecard">
+                <h4>{this.props.name}</h4>
+                <img src={this.props.image}/>
+                <p>Type: {this.props.type}</p>
+            </section>
+        )
+    }
+}
+
+export default PokeCard;
\ No newline at end of file