WJ-13 - New: MovieHighlight component;

WJ-13 - Update: Hightlights adjustments;

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

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

src/containers/Highlights/index.tsx

@@ -1,44 +1,29 @@
 import React from 'react';
 
 import { Wrapper } from 'components/Layout';
-import {
-  Container,
-  MajorContainer,
-  Backdrop,
-  Caption,
-  Title,
-  Overview,
-  MinorContainer,
-  Minor,
-} from './styles';
+import { MovieHighlight } from 'components';
+import { Container, MajorContainer, MinorContainer } from './styles';
 
 import Props from './dtos';
 
-const Highlights: React.FC<Props> = ({ theme, background, color, data }) => {
+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>
-          <Backdrop src={data[0]?.backdrop} alt={data[0]?.title} />
-          <Caption>
-            <Title>{data[0]?.title}</Title>
-            <Overview>{data[0]?.overview}</Overview>
-          </Caption>
+          <MovieHighlight {...movies[0]} />
         </MajorContainer>
-        <MinorContainer>
-          <Minor>
-            <Backdrop src={data[1]?.backdrop} alt={data[1]?.title} />
-            <Caption>
-              <Title>{data[1]?.title}</Title>
-            </Caption>
-          </Minor>
-          <Minor>
-            <Backdrop src={data[2]?.backdrop} alt={data[2]?.title} />
-            <Caption>
-              <Title>{data[2]?.title}</Title>
-            </Caption>
-          </Minor>
-        </MinorContainer>
+
+        {movies.length > 2 && (
+          <MinorContainer>
+            <MovieHighlight showOverview={false} {...movies[1]} />
+            <MovieHighlight showOverview={false} {...movies[2]} />
+          </MinorContainer>
+        )}
       </Container>
     </Wrapper>
   );

src/containers/Highlights/styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Container as DefaultContainer } from 'components/Layout';
-import { Color, Size } from 'shared/enums';
+import { Size } from 'shared/enums';
 
 export const Container = styled(DefaultContainer)`
   display: flex;
@@ -13,38 +13,17 @@ export const MajorContainer = styled.div`
   flex: 2 0 280px;
   overflow: hidden;
   border-radius: ${Size.Small};
-  margin-right: ${Size.Default};
+
+  & + div {
+
+  margin-left: ${Size.Default};
+  }
 
   @media (max-width: 900px) {
     margin: 0 ${Size.Default};
   }
 `;
 
-export const Backdrop = styled.img`
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-`;
-
-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};
-`;
-
 export const MinorContainer = styled.div`
   display: flex;
   flex: 1 0 130px;
@@ -57,18 +36,15 @@ export const MinorContainer = styled.div`
   @media (max-width: 900px) {
     display: none;
   }
-`;
-
-export const Minor = styled.div`
-  position: relative;
-  flex: 1 0 300px;
-  height: 17rem;
-  border-radius: ${Size.Small};
 
-  overflow: hidden;
+  & > div {
+    position: relative;
+    flex: 1 0 300px;
+    height: 17rem;
+    border-radius: ${Size.Small};
 
-  img {
-    object-fit: cover;
-    width: 100%;
+    overflow: hidden;
   }
 `;
+
+export const Minor = styled.div``;

src/screens/Home/index.tsx

@@ -20,7 +20,7 @@ const Home: React.FC = () => {
     <ColumnLayout>
       <Header />
       <ContentContainer>
-        <Highlights data={popularList} />
+        <Highlights movies={popularList} />
         <MovieList theme="light" title="Populares" data={popularList} />
         <MovieList theme="light" title="Lançamentos" data={nowPlayingList} />
       </ContentContainer>