header layout

src/components/Header/Header.js

@@ -18,8 +18,11 @@ class Header extends Component {
 
     return (
       <header style={backgroundStyle} className="header">
-          <div  className="header__background">
+          <div className="header__container">
-              {/* <h1>{this.props.movie.name}</h1> */}
+              <h1 className="header__container-heading">{this.props.movie.name}</h1>
+              <button onClick={() => alert("not a moive!")} className="header__container-btnPlay">Play</button>
+          <button className="header__container-btnMyList">My List</button>
+              <p className="header__container-overview">{this.props.movie.overview}</p>
           </div>    
     
         </header>

src/containers/App.js

@@ -34,7 +34,7 @@ makeAipCall = (searchItem) => {
                   movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
                  // pass in the movie object to our MovieRow component and keep it in a variable called 
                  // movieComponent 
-                 const movieComponent = <MovieRow
+                  const movieComponent = <MovieRow
                    movieDetails={() => this.selectMovieHandler(movie)}
                    key={movie.id}
                    movieImage={movieImageUrl}
@@ -110,5 +110,3 @@ makeAipCall = (searchItem) => {
 }
 
 export default App; 
-
-

src/containers/Layout/Layout.js

@@ -17,9 +17,9 @@ class Layout extends Component {
     this.getMovie(); 
   }
   
-  71411
+  // 71411
   getMovie = () => {
-    // 1) make api call to retrieve movie 
+    
     const url = "https://api.themoviedb.org/3/tv/71411?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0";
     axios.get(url) 
       .then(res => {

src/containers/MovieShowcase/MovieShowcase.js

@@ -1,20 +1,65 @@
 import React, { Component } from "react";
+import axios from 'axios'; 
+import MovieShowCaseRow from '../MovieShowcase/MovieShowcaseRow/MovieShowcaseRow'; 
 
 class MovieShowcase extends Component {
+
+  state = {
+    trendingMovieRows: [],
+    movies: []
+  }
+
+  componentWillMount() {
+    this.getTrending(); 
+  }
+  
+  getTrending = () => {
+    const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1'; 
+
+    axios.get(url)
+      .then(res => {
+        console.log(res.data.results); 
+        const results = res.data.results; 
+        let movieRows = []; 
+
+        results.forEach((movie) => {
+          const movieImageUrl = "url(https://image.tmdb.org/t/p/original/" + movie.poster_path;
+          const movieComponent = <MovieShowcase 
+                                  key={movie.id}
+                                  posterUrl={movieImageUrl}
+                                  movie={movie}/>
+          movieRows.push(movieComponent);                                   
+        })
+        // update state 
+        this.setState({trendingMovieRows: movieRows})
+
+      }).catch(error => {
+        console.log(error); 
+      })
+  }
+
+
+
+
    render() {
+
+
+
       return (
          <div className="movieShowcase">
           <h1 className="movieShowcase__heading">New Releases</h1>
           <div className="movieShowcase__container">
-            <div className="movieShowcase__container--movie">movie 1</div>
+          {/* {this.state.trendingMovieRows} */}
+          {/* {this.state.movies[0].title} */}
+            {/* <div className="movieShowcase__container--movie">movie 1</div>
             <div className="movieShowcase__container--movie">movie 2</div>
             <div className="movieShowcase__container--movie">movie 3</div>
             <div className="movieShowcase__container--movie">movie 4</div>
             <div className="movieShowcase__container--movie">movie 5</div>
-            <div className="movieShowcase__container--movie">movie 6</div>
+            <div className="movieShowcase__container--movie">movie 6</div> */}
-          </div>
+          {/* </div> */}
 
-          <h1 className="movieShowcase__heading">Trending Now</h1>
+          {/* <h1 className="movieShowcase__heading">Trending Now</h1>
           <div className="movieShowcase__container">
             <div className="movieShowcase__container--movie">movie 1</div>
             <div className="movieShowcase__container--movie">movie 2</div>
@@ -22,6 +67,7 @@ class MovieShowcase extends Component {
             <div className="movieShowcase__container--movie">movie 4</div>
             <div className="movieShowcase__container--movie">movie 5</div>
             <div className="movieShowcase__container--movie">movie 6</div>
+          </div> */}
           </div>
         </div>
         )

src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+// `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`;
+
+const movieShowcaseRow = (props) => (
+
+   <div>
+      <div className="shit">
+         <img src={movieImageUrl} />
+      </div>
+   </div>
+);
+
+export default movieShowcaseRow; 

src/static/sass/base/_base.scss

@@ -57,6 +57,6 @@ html {
 .container {
 	
 	display: grid;      
-	grid-template-rows: 47vw min-content min-content min-content; 
+	grid-template-rows: 50vw min-content min-content min-content; 
 	grid-template-columns:  4% repeat(10, 1fr) 4%;
 }

src/static/sass/components/_modal.scss

@@ -6,6 +6,7 @@
    left: 0; 
    color: #fff;
    height: 50rem;
+   box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
 
    &__title {
       font-size: 4rem;

src/static/sass/components/_movieShowcase.scss

@@ -1,6 +1,7 @@
 .movieShowcase {
-   background-color: blue;
+   background-color: $color-background;
    grid-column: 2 / 13;
+   color: #fff;
 
    &__container {
         display: grid;
@@ -12,3 +13,8 @@
         }
    }
 }
+
+.shit {
+   width: 20rem;
+   height: 10rem;
+}

src/static/sass/layout/_header.scss

@@ -1,9 +1,47 @@
 .header {
    background-color: rebeccapurple;
    grid-column: 1 / 13;
+   display: flex; 
   
    
-   &__background {
+   &__container {
+      padding-top: 25rem;
+      padding-left: 4.5rem;
+       color: #fff;
 
+      &-heading {
+         font-size: 6rem;
+         padding-bottom: 1rem;
+      }
+
+      &-btnPlay, 
+      &-btnMyList {
+         cursor: pointer;
+         font-size: 1.5rem;
+         color: #fff;
+         border-radius: 5px;
+         padding-left: 4rem;
+         margin-right: 1rem;
+         padding-right: 4rem;
+         border: 1px solid rgba(255, 255, 255, .4);
+         padding-top: 1rem;
+         background-color: rgba(51, 51, 51, .4);
+         padding-bottom: 1rem;
+
+      
+
+         &:hover {
+            color: $color-dark;
+            background-color: #fff;
+            transition: all .3s;
+         }
+      }
+
+      &-overview {
+         width: 45rem;
+         line-height: 1.3;
+         padding-top: 1.5rem;
+         font-size: 1.8rem;
+      }
    }
 }