2.1 Fetching Data

Author: serranoarevalo

components/NavBar.js

@@ -5,19 +5,41 @@ export default function NavBar() {
   const router = useRouter();
   return (
     <nav>
-      <Link href="/">
-        <a className={router.pathname === "/" ? "active" : ""}>Home</a>
-      </Link>
-      <Link href="/about">
-        <a className={router.pathname === "/about" ? "active" : ""}>About</a>
-      </Link>
+      <img src="/vercel.svg" />
+      <div>
+        <Link href="/">
+          <a className={router.pathname === "/" ? "active" : ""}>Home</a>
+        </Link>
+        <Link href="/about">
+          <a className={router.pathname === "/about" ? "active" : ""}>About</a>
+        </Link>
+      </div>
       <style jsx>{`
-        a {
-          text-decoration: none;
+        nav {
+          display: flex;
+          gap: 10px;
+          flex-direction: column;
+          align-items: center;
+          padding-top: 20px;
+          padding-bottom: 10px;
+          box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+            rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+        }
+        img {
+          max-width: 100px;
+          margin-bottom: 5px;
+        }
+        nav a {
+          font-weight: 600;
+          font-size: 18px;
         }
         .active {
           color: tomato;
         }
+        nav div {
+          display: flex;
+          gap: 10px;
+        }
       `}</style>
     </nav>
   );

pages/index.js

@@ -1,10 +1,29 @@
+import { useEffect, useState } from "react";
 import Seo from "../components/Seo";
 
+const API_KEY = "10923b261ba94d897ac6b81148314a3f";
+
 export default function Home() {
+  const [movies, setMovies] = useState();
+  useEffect(() => {
+    (async () => {
+      const { results } = await (
+        await fetch(
+          `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
+        )
+      ).json();
+      setMovies(results);
+    })();
+  }, []);
   return (
     <div>
       <Seo title="Home" />
-      <h1 className="active">Hello</h1>
+      {!movies && <h4>Loading...</h4>}
+      {movies?.map((movie) => (
+        <div key={movie.id}>
+          <h4>{movie.original_title}</h4>
+        </div>
+      ))}
     </div>
   );
 }

styles/globals.css

@@ -6,6 +6,12 @@ body {
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
+body {
+  max-width: 520px;
+  width: 100%;
+  margin: 0 auto;
+}
+
 a {
   color: inherit;
   text-decoration: none;