WJ-13 - Create Highlights component

src/components/MovieHighlight/dtos/index.ts

@@ -0,0 +1,5 @@
+import PopularProps from 'domains/Movie/api/Popular/Response';
+
+export default interface Props extends PopularProps {
+  showOverview?: boolean;
+}

src/components/MovieHighlight/index.tsx

@@ -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;

src/components/MovieHighlight/styles.ts

@@ -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};
+`;

src/components/index.ts

@@ -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';

src/containers/Highlights/dtos/index.ts

@@ -0,0 +1,6 @@
+import DefaultProps from 'shared/dtos';
+
+export default interface Props extends DefaultProps {
+  title?: string;
+  movies: any[];
+}

src/containers/Highlights/index.tsx

@@ -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;

src/containers/Highlights/styles.ts

@@ -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``;

src/containers/MovieList/styles.ts

@@ -11,11 +11,15 @@ export const Container = styled(DefaultContainer)`
 
 export const Title = styled.h2`
   margin-bottom: ${Size.Small};
-  margin-left: ${Size.Medium};
+
+  @media (max-width: 915px) {
+    margin-left: ${Size.Medium};
+  }
 `;
 
 export const ListContainer = styled.div`
   height: ${PosterHeight.Default};
+  overflow-y: hidden;
   overflow-x: auto;
 
   scroll-snap-type: x mandatory;
@@ -32,7 +36,11 @@ export const ListContainer = styled.div`
 
 export const ListContent = styled.div`
   display: inline-flex;
-  margin-left: ${Size.Medium};
+
+  @media (max-width: 915px) {
+    margin-left: ${Size.Medium};
+    margin-right: ${Size.Smallest};
+  }
 
   & > div {
     flex: 1 0 auto;

src/containers/index.ts

@@ -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';

src/screens/Home/index.tsx

@@ -4,9 +4,7 @@ import { NowPlaying, Popular } from 'domains/Movie/api';
 import MovieResponse from 'domains/Movie/api/Popular/Response';
 
 import { ColumnLayout } from 'components/Layout';
-import Header from 'containers/Header';
-import MovieList from 'containers/MovieList';
-import Footer from 'containers/Footer';
+import { Footer, Header, Highlights, MovieList } from 'containers';
 import { HeaderBackground, ContentContainer } from './styles';
 
 const Home: React.FC = () => {
@@ -22,6 +20,7 @@ const Home: React.FC = () => {
     <ColumnLayout>
       <Header />
       <ContentContainer>
+        <Highlights movies={popularList} />
         <MovieList theme="light" title="Populares" data={popularList} />
         <MovieList theme="light" title="Lançamentos" data={nowPlayingList} />
       </ContentContainer>