-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #37 from 90lucasgabriel/feature/WJ-13
WJ-13 - Create Highlights component
- Loading branch information
Showing
10 changed files
with
182 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import PopularProps from 'domains/Movie/api/Popular/Response'; | ||
|
||
export default interface Props extends PopularProps { | ||
showOverview?: boolean; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import React from 'react'; | ||
import { useHistory } from 'react-router-dom'; | ||
|
||
import Route from 'routes/enums'; | ||
import Props from './dtos'; | ||
import { Container, Backdrop, Caption, Title, Overview } from './styles'; | ||
|
||
const MovieHighlight: React.FC<Props> = ({ showOverview = true, ...movie }) => { | ||
const history = useHistory(); | ||
|
||
return ( | ||
<Container onClick={() => history.push(`${Route.MOVIE}/${movie.id}`)}> | ||
<Backdrop src={movie?.backdrop} alt={movie?.title} /> | ||
<Caption> | ||
<Title>{movie?.title}</Title> | ||
{showOverview && <Overview>{movie?.overview}</Overview>} | ||
</Caption> | ||
</Container> | ||
); | ||
}; | ||
|
||
export default MovieHighlight; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import styled from 'styled-components'; | ||
import { Color, Size } from 'shared/enums'; | ||
|
||
export const Container = styled.div` | ||
position: relative; | ||
height: 36rem; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
overflow: hidden; | ||
&:hover { | ||
cursor: pointer; | ||
img { | ||
width: 110%; | ||
height: 140%; | ||
} | ||
} | ||
`; | ||
|
||
export const Backdrop = styled.img` | ||
width: 100%; | ||
height: 100%; | ||
object-fit: cover; | ||
transition: width 0.2s, height 0.2s; | ||
`; | ||
|
||
export const Caption = styled.div` | ||
position: absolute; | ||
width: 100%; | ||
bottom: 0; | ||
left: 0; | ||
background: rgba(0, 0, 0, 0.3); | ||
padding: ${Size.Default}; | ||
color: ${Color.Fill}; | ||
`; | ||
|
||
export const Title = styled.h3` | ||
font-weight: 400; | ||
`; | ||
|
||
export const Overview = styled.p` | ||
line-height: ${Size.Medium}; | ||
margin-top: ${Size.Smallest}; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export { default as Button } from './Button'; | ||
export { default as Input } from './Input'; | ||
export { default as MovieHighlight } from './MovieHighlight'; | ||
export { default as Tooltip } from './Tooltip'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import DefaultProps from 'shared/dtos'; | ||
|
||
export default interface Props extends DefaultProps { | ||
title?: string; | ||
movies: any[]; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
|
||
import { Wrapper } from 'components/Layout'; | ||
import { MovieHighlight } from 'components'; | ||
import { Container, MajorContainer, MinorContainer } from './styles'; | ||
|
||
import Props from './dtos'; | ||
|
||
const Highlights: React.FC<Props> = ({ theme, background, color, movies }) => { | ||
if (!movies || movies.length === 0) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<Wrapper theme={theme} background={background} color={color}> | ||
<Container> | ||
<MajorContainer> | ||
<MovieHighlight {...movies[0]} /> | ||
</MajorContainer> | ||
|
||
{movies.length > 2 && ( | ||
<MinorContainer> | ||
<MovieHighlight showOverview={false} {...movies[1]} /> | ||
<MovieHighlight showOverview={false} {...movies[2]} /> | ||
</MinorContainer> | ||
)} | ||
</Container> | ||
</Wrapper> | ||
); | ||
}; | ||
|
||
export default Highlights; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import styled from 'styled-components'; | ||
import { Container as DefaultContainer } from 'components/Layout'; | ||
import { Size } from 'shared/enums'; | ||
|
||
export const Container = styled(DefaultContainer)` | ||
display: flex; | ||
flex-wrap: wrap; | ||
`; | ||
|
||
export const MajorContainer = styled.div` | ||
position: relative; | ||
height: 36rem; | ||
flex: 2 0 280px; | ||
overflow: hidden; | ||
border-radius: ${Size.Small}; | ||
& + div { | ||
margin-left: ${Size.Default}; | ||
} | ||
@media (max-width: 900px) { | ||
margin: 0 ${Size.Default}; | ||
} | ||
`; | ||
|
||
export const MinorContainer = styled.div` | ||
display: flex; | ||
flex: 1 0 130px; | ||
flex-wrap: wrap; | ||
& > div + div { | ||
margin-top: ${Size.Default}; | ||
} | ||
@media (max-width: 900px) { | ||
display: none; | ||
} | ||
& > div { | ||
position: relative; | ||
flex: 1 0 300px; | ||
height: 17rem; | ||
border-radius: ${Size.Small}; | ||
overflow: hidden; | ||
} | ||
`; | ||
|
||
export const Minor = styled.div``; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export { default as Footer } from './Footer'; | ||
export { default as Header } from './Header'; | ||
export { default as Highlights } from './Highlights'; | ||
export { default as Movie } from './Movie'; | ||
export { default as MovieList } from './MovieList'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters