Imagens da api adicionada aos melhores filmes

package.json

@@ -11,6 +11,7 @@
     "inspector": "^0.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.9.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.11",

src/components/FilmeCard/FilmeCard.js

@@ -1,5 +1,15 @@
 import React from "react";
+import {FaStar} from "react-icons/fa";
+import { Link } from "react-router-dom";
 
-export default function FilmesCard(){
-
-}
+export default function FilmesCard({filme, showLink = true}){
+    return(
+        <div>
+            <>
+            <img src={`https://image.tmdb.org/t/p/w500${filme.poster_path}`} alt={filme.title} /><h2>{filme.title}</h2><p>
+                <FaStar /> {filme.vote_average}
+                {showLink && <Link to={`/filme/${filme.id}`}>Detalhes</Link>}
+            </p></>
+        </div>
+    );
+};

src/components/NavBar/NavBar.css

@@ -10,28 +10,29 @@ a{
     font-size: 25px;
     text-decoration: none;
     color: rgb(255, 255, 255);
-
+}
+#pnav:hover{
+    color: rgb(97, 12, 12);
 }
 #pnav{
     position: relative;
     left: 10%;
 }
 
 #buscar{
-    top: 2.5%;
+    top: 20px;
     left: 68.5%;
     position: absolute;
     padding: 2px;
     border-radius: 8px;
     outline: unset;
-
 }
 
 #buscarB{
     background-color: rgb(255, 0, 0);
     color: rgb(255, 255, 255);
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-    top: 2.5%;
+    top: 20px;
     font-size: 15px;
     left: 80%;
     position: absolute;
@@ -49,5 +50,8 @@ a{
     font-size: 25px;
     left: 93%;
     border: none;
-    top: 1.8%;
+    top: 15px;
+}
+#sair:hover{
+    color: rgb(97, 12, 12);
 }

src/home/home.css

@@ -1,8 +1,7 @@
 .backhome{
     background-color: black;
     width: 100%;
-    height: 100%;
-    min-height: 100vh;
+    height: auto;
     position: absolute;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }

src/home/home.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import "./home.css";
 import NavBar from "../components/NavBar/NavBar";
 import axios from "axios";
+import FilmesCard from "../components/FilmeCard/FilmeCard";
 
 export default function Home(){
 
@@ -34,12 +35,12 @@ export default function Home(){
             <NavBar />
             <div className="filmes_container">
                 <h2>Melhores Filmes:</h2>
-                <ul>
-                     {melhoresFilmes.length > 0 && melhoresFilmes.map((filme) => (
-                    <li key={filme.id}>{filme.title}</li>
-                ))}
+                {melhoresFilmes.length === 0 && <p>Carregando...</p>}
+                {melhoresFilmes.length > 0 && melhoresFilmes.map((filme) => 
+                <FilmesCard key={filme.id} filme={filme}/>
+                )}
 
-                </ul>
+
             </div>
         </div>
     );