implemented the modal

src/components/Header/Header.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const header = () => (
    <header className="header">
-    */}
+    
    </header>
 ); 
 

src/components/MovieRow/MovieRow.js

@@ -1,4 +1,6 @@
 import React from 'react';
+ 
+
 
 const movieRow = (props) => (
 
@@ -6,6 +8,7 @@ const movieRow = (props) => (
          <div className="movie__column-poster">
             <img src={props.movie.posterSrc} alt="" className="movie__poster" />
          </div>
+         <button onClick={props.movieDetails}>hellooo</button>
    </div> 
 );
 

src/components/MovieRow/MovieSummary/MovieSummary.js

@@ -0,0 +1,26 @@
+import React from 'react'; 
+import Aux from '../../../hoc/Aux/Aux'; 
+
+const movieSummary = (props) => (
+
+   // // map object into an array of jsx elemenst 
+   // const movieDetails = Object.keys(props.movies)
+   //    .map(movieKey => {
+   //       return <p>{movieKey}: {props.movies[movieKey]}</p>
+   //    }); 
+   
+
+   <Aux>
+      {/* <img src="" alt=""/> */}
+      <h1>Movie Title</h1>
+      <p>rating: 45% realease-date: 2018 runtime: 100m </p>
+      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo, delectus! Veniam error perferendis pariatur atque facere? Repudiandae, quia mollitia sapiente 
+         necessitatibus vitae error assumenda maiores perferendis quaerat excepturi voluptatum quidem?</p>
+       <button>Play</button>  
+       <button>My list</button>  
+       <p>staring: mdf gglo bool emmy djf </p>
+       <p>Genres: mdf gglo bool emmy djf </p>
+   </Aux>
+); 
+
+export default movieSummary; 

src/components/UI/Backdrop/Backdrop.js

@@ -0,0 +1,11 @@
+import React from 'react'; 
+
+
+
+const backdrop = (props) => (
+   props.show ? <div 
+                  onClick={props.toggleBackdrop}
+                  className="backdrop"></div> : null 
+); 
+
+export default backdrop; 

src/components/UI/Modal/Modal.js

@@ -0,0 +1,15 @@
+import React from 'react'; 
+import Aux from '../../../hoc/Aux/Aux'; 
+import Backdrop from '../Backdrop/Backdrop'
+
+const modal = (props) => (
+   <Aux>
+      <Backdrop show={props.show} toggleBackdrop={props.modalClosed}/>
+      <div 
+         className={"modal " + (props.show ? "show" : "hide")}>
+         {props.children}
+      </div>
+   </Aux>
+); 
+
+export default modal;