main layout, components, styles

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -13,6 +14,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.2.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
@@ -39,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.9"
   }
 }

src/App.css

@@ -1,3 +1,9 @@
+html,
+body,
+.App {
+  height: 100%;
+}
+
 .App {
   text-align: center;
 }

src/App.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
 import Layout from './Layout';
 
 function App() {

src/ContentLayout/index.tsx

@@ -1,19 +1,42 @@
 import React, { FC } from 'react';
 import Filters from '../components/Filters';
-import Menu from '../components/Menu';
-import MoviesList from '../components/MovieList';
+import Sort from '../components/Menu';
+import MoviesList, { MovieInterface } from '../components/MovieList';
+import styled from "styled-components";
 
+export const ContentStyled = styled.div`
+padding: 30px;
+  display: flex;
+  flex-direction: column;
+  background: #484848;
+  flex-grow: 1;
+  
+`;
 
-const ContentLayout: FC = () => {
+export const ContentHeaderStyled = styled.div`
+  
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom: 1px solid;
+  align-items: flex-end;
+`;
+
+
+interface Content {
+    moviesList: MovieInterface[];
+}
+
+const ContentLayout: FC<Content> = ({ moviesList }) => {
 
     return (
-        <>
-            <div>
-                <Menu />
+        <ContentStyled>
+            <ContentHeaderStyled>
                 <Filters />
-            </div>
-            <MoviesList />
-        </>);
+                <Sort />
+            </ContentHeaderStyled>
+            <MoviesList sortedMovies={moviesList} />
+        </ContentStyled>);
 }
 
 export default ContentLayout;

src/Header/index.tsx

@@ -1,8 +1,21 @@
+import { Button, TextField } from '@material-ui/core';
 import React, { FC } from 'react';
+import { HeaderStyled, SearchContainerStyled, HeaderTopStyled, TextFieldStyled } from './styles';
 
 const Header: FC = () => {
 
-    return (<>header</>);
+    return (
+        <HeaderStyled>
+            <HeaderTopStyled>
+                <img width="180" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Netflix_2014_logo.svg/1200px-Netflix_2014_logo.svg.png" />
+                <Button color="primary" variant="contained">Add movie</Button>
+            </HeaderTopStyled>
+            <SearchContainerStyled>
+                <TextFieldStyled id="standard-basic" variant="filled" color="secondary" />
+                <Button color="secondary" variant="contained">Search</Button>
+            </SearchContainerStyled>
+        </HeaderStyled>
+    );
 }
 
 export default Header;

src/Header/styles.ts

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import { TextField } from "@material-ui/core";
+export const HeaderStyled = styled.div`
+  padding: 30px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-image: url("https://bramptonist.com/wp-content/uploads/2018/06/netflix-image.jpg");
+`;
+
+export const SearchContainerStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 80%;
+  align-self: center;
+`;
+
+export const HeaderTopStyled = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const TextFieldStyled = styled(TextField)`
+  background: #655757a3;
+  flex-grow: 1;
+  margin-right: 15px !important;
+`;

src/Layout/index.tsx

@@ -1,18 +1,18 @@
 import React, { FC } from 'react';
+import { MovieInterface } from '../components/MovieList';
 import ContentLayout from '../ContentLayout';
 import Header from '../Header';
-
+import { MOVIES } from '../mock-data';
 
 
 const Layout: FC = () => {
 
-    //const movies = 
+    const movies = MOVIES as unknown as MovieInterface[];
 
     return (
         <>
-            layout
-            {/* <Header />
-            <ContentLayout /> */}
+            <Header />
+            <ContentLayout moviesList={movies} />
         </>
     );
 }

src/MovieCard/index.tsx

@@ -1,21 +1,16 @@
 import React, { FC } from 'react';
+import { MovieInterface } from '../components/MovieList';
 
-const MovieCard: FC<MovieCardInterface> = ({ title, description }) => {
+const MovieCard: FC<{ movie: MovieInterface }> = ({ movie }) => {
 
     return (
         <div className="MovieCard">
-            <h3>{title}</h3>
-            <h3>{description}</h3>
+            <h3>{movie.title}</h3>
+            <img width="200px" height="350px" src={movie.posterUrl} />
         </div>
     );
 }
 
-interface MovieCardInterface {
-    title: string,
-    description: string,
-    coverUrl: string,
-}
-
 
 export default MovieCard;
 

src/components/Filters/index.tsx

@@ -1,14 +1,25 @@
+
+import Link from '@material-ui/core/Link';
 import React, { FC } from 'react';
+import styled from 'styled-components';
 
+const StyledFilters = styled.div`
+    display: flex;
+`;
 
-import './App.css';
+const FilterLink = styled(Link)`
+    padding: 6px 12px;
+`;
 
 const Filters: FC = () => {
+    const filterOptions = ['all', 'documentary', 'comedy', 'horror', 'crime']
 
     return (
-        <>
-
-        </>
+        <StyledFilters>
+            {filterOptions.map(filter => (
+                <FilterLink href="#" color="textSecondary"> {filter} </FilterLink>
+            ))}
+        </StyledFilters>
     );
 }
 

src/components/Menu/index.tsx

@@ -1,18 +1,36 @@
-import React, { FC } from 'react';
 
+import { FormControl, InputLabel, Link, MenuItem, Select } from '@material-ui/core';
+import React, { FC } from 'react';
+import styled from 'styled-components';
 
-import './App.css';
+const StyledSelect = styled(Select)`
+    min-width: 180px;
+    align-items: flex-end;
+    border-bottom: 1px solid;
+`;
 
+const Sort: FC = () => {
 
+    const sortOptions = [{
+        key: 'byDate',
+        title: 'Release date'
+    }]
 
+    return (
+        <div>
+            <FormControl>
+                <InputLabel id="demo-simple-select-label">Sort By</InputLabel>
+                <StyledSelect color="secondary"
 
-const Menu: FC = () => {
+                    id="demo-simple-select"
 
-    return (
-        <>
+                >
+                    {sortOptions.map(menu => (<MenuItem value={menu.key} key={menu.key}>{menu.title}</MenuItem>))}
 
-        </>
+                </StyledSelect>
+            </FormControl>
+        </div>
     );
 }
 
-export default Menu;
+export default Sort;

src/components/MovieList/index.tsx

@@ -1,12 +1,43 @@
 import React, { FC } from 'react';
+import styled from 'styled-components';
+import MovieCard from '../../MovieCard';
 
 
-const MoviesList: FC = () => {
+
+
+const StyledMoviesList = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+`;
+
+
+const MovieCardContainerStyled = styled.div`
+    padding: 15px;
+`;
+export interface MovieInterface {
+    title: string,
+    description: string,
+    posterUrl: string,
+    id: string,
+    genres?: ["Action", "Comedy", "Crime"]
+    releaseDate?: "2018-02-28",
+}
+
+interface MoviesListInterface {
+    sortedMovies: MovieInterface[];
+}
+
+const MoviesList: FC<MoviesListInterface> = ({ sortedMovies }) => {
 
     return (
-        <>
+        <StyledMoviesList>
+
+            {sortedMovies.map(movie => (
+                <MovieCardContainerStyled>
+                    <MovieCard movie={movie}></MovieCard>
+                </MovieCardContainerStyled>))}
 
-        </>
+        </StyledMoviesList>
     );
 }
 

src/index.css

@@ -1,13 +1,26 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+.App {
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+}