first commit

src/components/Footer/Footer.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const footer = () => (
+  
+   <footer className="footer">
+      <div className="footer__heading">icons</div>
+      <div className="footer__container">
+         <div className="footer__container--description">desc 1</div>
+         <div className="footer__container--description">desc 2</div>
+         <div className="footer__container--description">desc 3</div>
+         <div className="footer__container--description">desc 4</div>
+         <div className="footer__container--description">desc 5</div>
+         <div className="footer__container--description">desc 6</div>
+         <div className="footer__container--description">desc 7</div>
+         <div className="footer__container--description">desc 8</div>
+         <div className="footer__container--description">desc 9</div>
+         <div className="footer__container--description">desc 10</div>
+         <div className="footer__container--description">desc 11</div>
+         <div className="footer__container--description">desc 12</div>
+         <div className="footer__container--description">desc 13</div>
+      </div>
+      <div className="footer__serviceCode">service code</div>
+      <div className="footer__copyright">copyright</div>
+   </footer>
+);
+
+export default footer; 

src/components/Header/Header.js

@@ -0,0 +1,9 @@
+import React from 'react'; 
+
+const header = () => (
+   <header className="header">
+     Header
+   </header>
+); 
+
+export default header; 

src/components/MovieRow/MovieRow.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const movieRow = (props) => (
+
+   <div className="movie">
+         <div className="movie__column-poster">
+            <img src={props.movie.posterSrc} alt="" className="movie__poster" />
+         </div>
+      
+      <div className={"movie__column-overview " + (props.val % 2 == 0 ? 'even' : 'odd')}>
+            <h1 className="movie__column-overview-heading">{props.movie.title}</h1>
+            <p className="movie__column-overview-text">{props.movie.overview}</p>
+            <a className="movie__column-overview-btn"
+               onClick={() => { window.location.href = "https://www.themoviedb.org/movie/" + props.movie.id; }}>
+               view</a>
+         </div>
+   </div> 
+);
+
+export default movieRow; 

src/components/NavigationItems/NavigationItem/NavigationItem.js

@@ -0,0 +1,11 @@
+import React from 'react'; 
+import { NavLink } from 'react-router-dom';
+
+const navigationItem = (props) => (
+   
+   <NavLink className="navigation__container-link" exact={props.exact}
+   to={props.link}>{props.children}</NavLink>
+   
+)
+
+export default navigationItem;

src/components/NavigationItems/NavigationItems.js

@@ -0,0 +1,24 @@
+import React from 'react'; 
+import NavigationItem from './NavigationItem/NavigationItem';
+
+
+const navigationItems = props => (
+  <ul className="navigation__container">
+    <NavigationItem link="/" exact>Netflix</NavigationItem>
+    <NavigationItem link="/">Home</NavigationItem>
+    <NavigationItem link="/">TV Shows</NavigationItem>
+    <NavigationItem link="/">Movies</NavigationItem>
+    <NavigationItem link="/">Recently Added</NavigationItem>
+    <NavigationItem link="/">My List</NavigationItem>
+    
+    <div className="navigation__container--left">
+      <input 
+        placeholder="Search movie..." 
+        type="text" />
+      {/* <p>hello</p>
+      <p>hello</p> */}
+    </div>
+  </ul>
+);
+
+export default navigationItems; 

src/components/Search/Search.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const search = (props) => (
+   <div className="search">
+   
+      <input 
+         onChange={props.onSearch}
+         type="text" 
+         placeholder="Search movie..." 
+         className="search__input"/>
+   
+   </div>
+   
+);
+
+export default search;