Skip to content

Commit 8539648

Browse files
murelainmurelain
committed
main layout, components, styles
1 parent 5654ce6 commit 8539648

File tree

17 files changed

+16652
-154
lines changed

17 files changed

+16652
-154
lines changed

‎package-lock.json

Lines changed: 16048 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/core": "^4.11.3",
67
"@testing-library/jest-dom": "^5.11.4",
78
"@testing-library/react": "^11.1.0",
89
"@testing-library/user-event": "^12.1.10",
@@ -13,6 +14,7 @@
1314
"react": "^17.0.1",
1415
"react-dom": "^17.0.1",
1516
"react-scripts": "4.0.3",
17+
"styled-components": "^5.2.1",
1618
"typescript": "^4.1.2",
1719
"web-vitals": "^1.0.1"
1820
},
@@ -39,5 +41,8 @@
3941
"last 1 firefox version",
4042
"last 1 safari version"
4143
]
44+
},
45+
"devDependencies": {
46+
"@types/styled-components": "^5.1.9"
4247
}
4348
}

‎src/App.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
html,
2+
body,
3+
.App {
4+
height: 100%;
5+
}
6+
17
.App {
28
text-align: center;
39
}

‎src/App.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
42
import Layout from './Layout';
53

64
function App() {

‎src/ContentLayout/index.tsx

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,42 @@
11
import React, { FC } from 'react';
22
import Filters from '../components/Filters';
3-
import Menu from '../components/Menu';
4-
import MoviesList from '../components/MovieList';
3+
import Sort from '../components/Menu';
4+
import MoviesList, { MovieInterface } from '../components/MovieList';
5+
import styled from "styled-components";
56

7+
export const ContentStyled = styled.div`
8+
padding: 30px;
9+
display: flex;
10+
flex-direction: column;
11+
background: #484848;
12+
flex-grow: 1;
13+
14+
`;
615

7-
const ContentLayout: FC = () => {
16+
export const ContentHeaderStyled = styled.div`
17+
18+
display: flex;
19+
justify-content: space-between;
20+
width: 100%;
21+
border-bottom: 1px solid;
22+
align-items: flex-end;
23+
`;
24+
25+
26+
interface Content {
27+
moviesList: MovieInterface[];
28+
}
29+
30+
const ContentLayout: FC<Content> = ({ moviesList }) => {
831

932
return (
10-
<>
11-
<div>
12-
<Menu />
33+
<ContentStyled>
34+
<ContentHeaderStyled>
1335
<Filters />
14-
</div>
15-
<MoviesList />
16-
</>);
36+
<Sort />
37+
</ContentHeaderStyled>
38+
<MoviesList sortedMovies={moviesList} />
39+
</ContentStyled>);
1740
}
1841

1942
export default ContentLayout;

‎src/Header/index.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1+
import { Button, TextField } from '@material-ui/core';
12
import React, { FC } from 'react';
3+
import { HeaderStyled, SearchContainerStyled, HeaderTopStyled, TextFieldStyled } from './styles';
24

35
const Header: FC = () => {
46

5-
return (<>header</>);
7+
return (
8+
<HeaderStyled>
9+
<HeaderTopStyled>
10+
<img width="180" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Netflix_2014_logo.svg/1200px-Netflix_2014_logo.svg.png" />
11+
<Button color="primary" variant="contained">Add movie</Button>
12+
</HeaderTopStyled>
13+
<SearchContainerStyled>
14+
<TextFieldStyled id="standard-basic" variant="filled" color="secondary" />
15+
<Button color="secondary" variant="contained">Search</Button>
16+
</SearchContainerStyled>
17+
</HeaderStyled>
18+
);
619
}
720

821
export default Header;

‎src/Header/styles.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import styled from "styled-components";
2+
import { TextField } from "@material-ui/core";
3+
export const HeaderStyled = styled.div`
4+
padding: 30px;
5+
min-height: 200px;
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: space-between;
9+
background-image: url("https://bramptonist.com/wp-content/uploads/2018/06/netflix-image.jpg");
10+
`;
11+
12+
export const SearchContainerStyled = styled.div`
13+
display: flex;
14+
justify-content: center;
15+
width: 80%;
16+
align-self: center;
17+
`;
18+
19+
export const HeaderTopStyled = styled.div`
20+
display: flex;
21+
justify-content: space-between;
22+
`;
23+
24+
export const TextFieldStyled = styled(TextField)`
25+
background: #655757a3;
26+
flex-grow: 1;
27+
margin-right: 15px !important;
28+
`;

‎src/Layout/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React, { FC } from 'react';
2+
import { MovieInterface } from '../components/MovieList';
23
import ContentLayout from '../ContentLayout';
34
import Header from '../Header';
4-
5+
import { MOVIES } from '../mock-data';
56

67

78
const Layout: FC = () => {
89

9-
//const movies =
10+
const movies = MOVIES as unknown as MovieInterface[];
1011

1112
return (
1213
<>
13-
layout
14-
{/* <Header />
15-
<ContentLayout /> */}
14+
<Header />
15+
<ContentLayout moviesList={movies} />
1616
</>
1717
);
1818
}

‎src/MovieCard/index.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
11
import React, { FC } from 'react';
2+
import { MovieInterface } from '../components/MovieList';
23

3-
const MovieCard: FC<MovieCardInterface> = ({ title, description }) => {
4+
const MovieCard: FC<{ movie: MovieInterface }> = ({ movie }) => {
45

56
return (
67
<div className="MovieCard">
7-
<h3>{title}</h3>
8-
<h3>{description}</h3>
8+
<h3>{movie.title}</h3>
9+
<img width="200px" height="350px" src={movie.posterUrl} />
910
</div>
1011
);
1112
}
1213

13-
interface MovieCardInterface {
14-
title: string,
15-
description: string,
16-
coverUrl: string,
17-
}
18-
1914

2015
export default MovieCard;
2116

‎src/components/Filters/index.tsx

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
1+
2+
import Link from '@material-ui/core/Link';
13
import React, { FC } from 'react';
4+
import styled from 'styled-components';
25

6+
const StyledFilters = styled.div`
7+
display: flex;
8+
`;
39

4-
import './App.css';
10+
const FilterLink = styled(Link)`
11+
padding: 6px 12px;
12+
`;
513

614
const Filters: FC = () => {
15+
const filterOptions = ['all', 'documentary', 'comedy', 'horror', 'crime']
716

817
return (
9-
<>
10-
11-
</>
18+
<StyledFilters>
19+
{filterOptions.map(filter => (
20+
<FilterLink href="#" color="textSecondary"> {filter} </FilterLink>
21+
))}
22+
</StyledFilters>
1223
);
1324
}
1425

0 commit comments

Comments
 (0)