first team push

src/App.jsx

@@ -11,10 +11,42 @@ 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 React from 'react';
+import data from './data.json'; // Ensure the path is correct
+
+//Pokemon component to display the name of each Pokémon
+const Pokemon = ({ name, height, id }) => {
+  return (
+    <div className="pokemon">
+      <h2>{name}</h2>
+      <p><strong>Height:</strong> {height}</p>
+      <p><strong>Id:</strong> {id}</p>
+    </div>
+  );
+};
+
+// Header component
+const Header = () => <h1>Pokémon List</h1>;
+
+// Footer component
+const Footer = () => <footer>© 2024 Pokémon Inc.</footer>;
+
+// Main App component
 export const App = () => {
   return (
     <div className="App">
-      <p>Pokemon goes here</p>
+      <Header />
+      {data.pokemons.map((pokemon) => (
+        <Pokemon
+          key={pokemon.id}
+          name={pokemon.name}
+          height={pokemon.height}
+          id={pokemon.id}
+        />
+      ))}
+      <Footer />
     </div>
   );
 };
+

src/components/Pokemon.jsx

@@ -2,3 +2,16 @@
 export const Pokemon = () => {
   return <div>Pokemon</div>;
 };
+
+
+
+const Pokemon = ({ name, types }) => {
+  return (
+    <div className="pokemon">
+      <h2>{name}</h2>
+      <p>Types: {types.join(', ')}</p>
+    </div>
+  );
+};
+
+