Pulled the data

movie-browser/package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "react-scripts": "3.0.1"

movie-browser/src/App.js

@@ -1,11 +1,14 @@
 import React from 'react';
+import FeatureImage from './FeatureImage';
+import Movies from './Movies';
 
 const App = () => {
   return (
     <div>
-      Movie Browser
+      <FeatureImage />
+      <Movies />
     </div>
   );
-}
+};
 
 export default App;

movie-browser/src/FeatureImage.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cat from './images/cat.jpg'; // gives image path
+const FeatureImage = () => {
+  return (
+    <div>
+      <img style={{ height: 300 }} src={cat} alt='' />
+    </div>
+  );
+};
+
+export default FeatureImage;

movie-browser/src/MovieCard.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+
+const theme = {
+  primarly: 'teal',
+  secondary: 'green',
+  font: 'sans-serif',
+};
+
+const H1 = styled.h1`
+  font-family: ${(props) => props.theme.font};
+`;
+
+const MovieCard = ({ data }) => {
+  const { title, description } = data;
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div>
+        <H1>{title}</H1>
+        <p>{description}</p>
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default MovieCard;

movie-browser/src/Movies.js

@@ -0,0 +1,35 @@
+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+
+import MovieCard from './MovieCard';
+
+const Movies = () => {
+  let [data, setData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios('https://ghibliapi.herokuapp.com/films');
+
+      if (result && result.data) {
+        setData(result.data);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+<<<<<<< Updated upstream
+      {data.map((item) => {
+        return <MovieCard key={item.id} data={item} />;
+=======
+      {data.data.map((item) => {
+        return <MovieCard key={item.id} {...item} />;
+>>>>>>> Stashed changes
+      })}
+    </div>
+  );
+};
+
+export default Movies;