#20 react-netflix: banner component

react/netflix-app/public/manifest.json

@@ -1,23 +1,7 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
+  "short_name": "Netflix",
+  "name": "Netflix Movie",
+  "icons": [],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

react/netflix-app/src/App.js

@@ -1,10 +1,12 @@
 import "./App.css";
+import Banner from "./components/Banner";
 import Nav from "./components/Nav";
 
 const App = () => {
   return (
     <div className="App">
       <Nav />
+      <Banner />
     </div>
   );
 };

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

@@ -0,0 +1,106 @@
+.banner {
+  color: white;
+  object-fit: contain;
+  height: 448px;
+}
+@media (min-width: 1500px) {
+  .banner {
+    position: relative;
+    height: 600px;
+  }
+  .banner--fadeBottom {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 40rem;
+  }
+}
+@media (max-width: 768px) {
+  .banner__contents {
+    width: min-content !important;
+    padding-left: 2.3rem;
+    margin-left: 0px !important;
+  }
+  .banner__description {
+    font-size: 0.8rem !important;
+    width: auto !important;
+  }
+  .info {
+    text-align: start;
+    padding-right: 1.2rem;
+  }
+  .space {
+    margin-left: 6px;
+  }
+  .banner__button {
+    font-size: 0.8rem !important;
+    border-radius: 4px !important;
+  }
+}
+.banner__contents {
+  margin-left: 40px;
+  padding-top: 140px;
+  height: 190px;
+}
+.banner__title {
+  font-size: 3rem;
+  font-weight: 800;
+  padding-bottom: 0.5rem;
+}
+.banner__description {
+  width: 45rem;
+  line-height: 1.3;
+  padding-top: 1rem;
+  font-weight: 500;
+  font-size: 1rem;
+  max-width: 400px;
+  height: 80px;
+}
+.banner--fadeBottom {
+  height: 7.4rem;
+  background-image: linear-gradient(
+    180deg,
+    transparent,
+    rgba(37, 37, 37, 0.61),
+    #111
+  );
+}
+.banner__buttons {
+  display: flex;
+  flex-direction: row;
+}
+.banner__button {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  font-size: 1rem;
+  font-weight: 700;
+  border-radius: 0.2vw;
+  padding: 0.4rem 1.8rem 0.4rem 1rem;
+  margin-right: 1rem;
+}
+.banner__button:hover {
+  color: #000;
+  background-color: rgba(170, 170, 170, 0.9);
+  transition: all 0.2s;
+}
+.play {
+  background-color: white;
+  color: black;
+}
+.info {
+  background-color: rgba(109, 109, 110, 0.7);
+  color: white;
+}
+.info:hover {
+  background-color: rgb(74, 74, 74);
+  color: white;
+}
+
+.space {
+  margin-left: 4px;
+}

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

@@ -0,0 +1,59 @@
+import axios from "../api/axios";
+import React, { useEffect, useState } from "react";
+import requests from "../api/requests";
+import "./Banner.css";
+
+const Banner = () => {
+  const [movie, setMovie] = useState([]);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    const request = await axios.get(requests.fetchNowPlaying);
+
+    const movieId =
+      request.data.results[
+        Math.floor(Math.random() * request.data.results.length)
+      ].id;
+
+    const { data: movieDetail } = await axios.get(`/movie/${movieId}`, {
+      params: { append_to_response: "videos" },
+    });
+
+    setMovie(movieDetail);
+  };
+
+  const truncate = (str, n) => {
+    return str?.length > n ? str.substr(0, n - 1) + "..." : str;
+  };
+
+  return (
+    <header
+      className="banner"
+      style={{
+        backgroundImage: `url("https://image.tmdb.org/t/p/original${movie?.backdrop_path}")`,
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+      }}
+    >
+      <div className="banner__contents">
+        <h1>{movie.title || movie.name || movie.original_name}</h1>
+
+        <div className="banner__buttons">
+          <button className="banner__button play">Play</button>
+          <button className="banner__button info">More Information</button>
+        </div>
+
+        <h1 className="banner__description">
+          {truncate(movie?.overview, 100)}
+        </h1>
+      </div>
+
+      <div className="banne--fadeBottom"></div>
+    </header>
+  );
+};
+
+export default Banner;

react/netflix-app/src/index.css

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}

react/netflix-app/src/index.js

@@ -5,9 +5,9 @@ import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function