commit exercixe W5

src/App.jsx

@@ -11,10 +11,29 @@ https://reactjs.org/docs/lists-and-keys.html
 Feel free to create more components, such as header/footer,
 or why not include some more data from the array? */
 
+import { Pokemon } from "./components/Pokemon"
+import data from "./data.json"
+
 export const App = () => {
+  const { pokemons } = data
+  const renderPokemons = pokemons.map(({id, name, category, height, types}) => (
+   <Pokemon
+      name={name}
+      category={category}
+      height={height}
+      types={types}
+      key={id}
+      />
+    )
+  )
+
   return (
     <div className="App">
-      <p>Pokemon goes here</p>
+      <p>Catch them all</p>
+      <section className="pokemonList">{renderPokemons}
+      </section>
     </div>
   );
 };
+
+export default App

src/components/Pokemon.css

@@ -0,0 +1,6 @@
+.pokemon {
+    border: solid white 1px;
+    padding: 1em;
+    margin-bottom: 1em;
+    border-radius: 4px; 
+}

src/components/Pokemon.jsx

@@ -1,4 +1,55 @@
 // Destructure pokemon props here :)
-export const Pokemon = () => {
-  return <div>Pokemon</div>;
-};
+// we have to pass the information into the property 
+import PropTypes from "prop-types"
+import { Type } from "./Type"
+import "./Pokemon.css"
+
+export const Pokemon = ({
+  //we write what we want to diplay
+name, category, height, types }) => {
+  return (
+    <div className="pokemon">
+    <p>
+      <span>Name: {name}</span>
+    </p>
+    <p>
+      <span>Category: {category}</span>
+    </p>
+    <p>
+      <span>Height: {height}</span>
+    </p>
+      <Type types={types} />
+    </div>
+  )
+}
+
+Pokemon.propTypes = {
+  name: PropTypes.string.isRequired,
+  category: PropTypes.string.isRequired,
+  height: PropTypes.number.isRequired,
+  types: PropTypes.array.isRequired,
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/Type.jsx

@@ -1,4 +1,25 @@
 // Destructure pokemon types props here :)
-export const Type = () => {
-  return <div>Type</div>;
-};
+import PropTypes from "prop-types"
+
+export const Type = ({ types }) => {
+  return (
+    <div>
+      <span>Types:</span>
+    {types.map((type, key) => (
+       <ul key={key}>
+        {" "}
+         <li key={key}>{type}</li>
+      </ul>
+        ))}
+    </div>
+  )
+}
+
+
+Type.propTypes = {
+  types: PropTypes.array.isRequired,
+}
+
+Type.defaultProps = {
+  components: "Components are missing",
+}

src/main.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { App } from "./App.jsx";
+import App from "./App.jsx"; // idk if was a mistake but there were curly brackets around App and i was having a error so I removed it
 import "./styles.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(

src/styles.css

@@ -1,3 +1,47 @@
+body {
+  margin: 0 auto;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: black;
+  color: white;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+span {
+  font-weight: bold;
+  display: block;
+}
+
 .App {
   font-family: sans-serif;
+  padding: 20px;
+  font-size: large;
+}
+
+.pokemonOuter {
+  flex: 1;
+  margin: 10px;
+  padding: 20px;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 25px;
 }
+
+/* Media query for tablet (768px)*/
+@media (min-width: 768px) {
+  .pokemonOuter {
+    flex: 1;
+    margin: 10px;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 25px;
+  }
+}