#20 react-netflix: movies row

react/netflix-app/src/App.css

@@ -0,0 +1,6 @@
+* {
+  margin: 0;
+}
+.app {
+  background: #111;
+}

react/netflix-app/src/App.js

@@ -1,12 +1,33 @@
+import requests from "./api/requests";
 import "./App.css";
 import Banner from "./components/Banner";
 import Nav from "./components/Nav";
+import Row from "./components/Row";
 
 const App = () => {
   return (
-    <div className="App">
+    <div className="app">
       <Nav />
       <Banner />
+      <Row
+        title="NETFLIX ORIGINALS"
+        id="NO"
+        fetchUrl={requests.fetchNetflixOriginals}
+        isLargeRow
+      />
+
+      <Row title="TRANDING NOW" id="TN" fetchUrl={requests.fetchTrending} />
+      <Row title="TOP RATED" id="TR" fetchUrl={requests.fetchTopRated} />
+      <Row
+        title="ACTION MOVIES"
+        id="AM"
+        fetchUrl={requests.fetchActionMovies}
+      />
+      <Row
+        title="COMEDY MOVIES"
+        id="=CM"
+        fetchUrl={requests.fetchComedyMovies}
+      />
     </div>
   );
 };

react/netflix-app/src/components/Nav.css

@@ -29,3 +29,14 @@
   width: 30px;
   object-fit: contain;
 }
+
+.nav__input {
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background-color: rgba(0, 0, 0, 0.582);
+  border-radius: 5px;
+  color: white;
+  padding: 5px;
+  border: none;
+}

react/netflix-app/src/components/Row.css

@@ -0,0 +1,160 @@
+.row {
+  margin-left: 20px;
+  color: white;
+}
+h2 {
+  padding-left: 20px;
+}
+.slider {
+  position: relative;
+}
+.slider__arrow-left {
+  background-clip: content-box;
+  padding: 20px 0;
+  box-sizing: border-box;
+  transition: 400ms all ease-in-out;
+  cursor: pointer;
+  width: 80px;
+  z-index: 1000;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+}
+.slider__arrow-right {
+  padding: 20px 0;
+  background-clip: content-box;
+  box-sizing: border-box;
+  transition: 400ms all ease-in-out;
+  cursor: pointer;
+  width: 80px;
+  z-index: 1000;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+}
+.arrow {
+  transition: 400ms all ease-in-out;
+}
+.arrow:hover {
+  transition: 400ms all ease-in-out;
+  transform: scale(1.5);
+}
+.slider:hover .slider__arrow-left {
+  transition: 400ms all ease-in-out;
+  visibility: visible;
+}
+.slider:hover .slider__arrow-right {
+  transition: 400ms all ease-in-out;
+  visibility: visible;
+}
+.slider__arrow-left:hover {
+  background: rgba(20, 20, 20, 0.5);
+  transition: 400ms all ease-in-out;
+}
+.slider__arrow-right:hover {
+  background: rgba(20, 20, 20, 0.5);
+  transition: 400ms all ease-in-out;
+}
+
+.row__posters {
+  display: flex;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  padding: 20px 0 20px 20px;
+  scroll-behavior: smooth;
+}
+.row__posters::-webkit-scrollbar {
+  display: none;
+}
+.row__poster {
+  object-fit: contain;
+  width: 100%;
+  max-height: 144px;
+  margin-right: 10px;
+  transition: transform 450ms;
+  border-radius: 4px;
+}
+.row__poster:hover {
+  transform: scale(1.08);
+}
+.row__posterLarge {
+  max-height: 320px;
+}
+.row__posterLarge:hover {
+  transform: scale(1.1);
+  opacity: 1;
+}
+
+.row__arrow-left {
+  position: absolute;
+  top: 0;
+  left: 20px;
+  height: 100%;
+  width: 32px;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+}
+.row__arrow-right {
+  position: absolute;
+  top: 0;
+  right: 0px;
+  height: 100%;
+  width: 32px;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+}
+@media screen and (min-width: 1200px) {
+  .row__poster {
+    max-height: 160px;
+  }
+  .row__posterLarge {
+    max-height: 360px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .row__poster {
+    max-height: 100px;
+  }
+  .row__posterLarge {
+    max-height: 280px;
+  }
+}
+
+.swiper-pagination {
+  text-align: right !important;
+}
+
+.swiper-pagination-bullet {
+  background: gray !important;
+  opacity: 1 !important;
+}
+
+.swiper-pagination-bullet-active {
+  background: white !important;
+}
+
+.swiper-button-prev {
+  color: white !important;
+}
+
+.swiper-button-next {
+  color: white !important;
+}
+
+.swiper-button-next:after,
+.swiper-button-prev:after {
+  font-size: 1.3rem !important;
+  font-weight: 600 !important;
+}

react/netflix-app/src/components/Row.js

@@ -0,0 +1,47 @@
+import axios from "../api/axios";
+import React, { useEffect, useState } from "react";
+import "./Row.css";
+
+const Row = ({ title, id, fetchUrl, isLargeRow }) => {
+  const [movies, setMovies] = useState([]);
+
+  useEffect(() => {
+    fetchMovieData();
+  }, []);
+
+  const fetchMovieData = async () => {
+    const request = await axios.get(fetchUrl);
+
+    setMovies(request.data.results);
+  };
+
+  return (
+    <section className="row">
+      <h2>{title}</h2>
+      <div className="slider">
+        <div className="slider__arrow-left">
+          <span className="arrow">{"<"}</span>
+        </div>
+
+        <div id={id} className="row__posters">
+          {movies.map((movie) => (
+            <img
+              key={movie.id}
+              className={`row__poster ${isLargeRow && "row__posterLarge"}`}
+              src={`https://image.tmdb.org/t/p/original${
+                isLargeRow ? movie.poster_path : movie.backdrop_path
+              }`}
+              alt={movie.name}
+            />
+          ))}
+        </div>
+
+        <div className="slider__arrow-right">
+          <span className="arrow">{">"}</span>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Row;

react/netflix-app/src/index.css

@@ -1,4 +1,13 @@
 body {
   margin: 0;
-  padding: 0;
+  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",
+    monospace;
 }