From 17790c2daf6dc57fa80a9fc4f70c7950b0b33b03 Mon Sep 17 00:00:00 2001
From: RavikFerreira <ravikferreira.developer@gmail.com>
Date: Sun, 4 Jun 2023 16:31:50 -0300
Subject: [PATCH] Imagens da api adicionada aos melhores filmes

---
 package-lock.json                     |  9 +++++++++
 package.json                          |  1 +
 src/components/FilmeCard/FilmeCard.js | 16 +++++++++++++---
 src/components/NavBar/NavBar.css      | 14 +++++++++-----
 src/home/home.css                     |  3 +--
 src/home/home.js                      | 11 ++++++-----
 6 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 20089c5..47d4b1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,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",
@@ -14568,6 +14569,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz",
+      "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 26bb49f..790b194 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/FilmeCard/FilmeCard.js b/src/components/FilmeCard/FilmeCard.js
index 60def5a..c13a4a7 100644
--- a/src/components/FilmeCard/FilmeCard.js
+++ b/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(){
-    
-}
\ No newline at end of file
+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>
+    );
+};
\ No newline at end of file
diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css
index b503d2b..1026a3d 100644
--- a/src/components/NavBar/NavBar.css
+++ b/src/components/NavBar/NavBar.css
@@ -10,7 +10,9 @@ a{
     font-size: 25px;
     text-decoration: none;
     color: rgb(255, 255, 255);
-    
+}
+#pnav:hover{
+    color: rgb(97, 12, 12);
 }
 #pnav{
     position: relative;
@@ -18,20 +20,19 @@ a{
 }
 
 #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);
 }
\ No newline at end of file
diff --git a/src/home/home.css b/src/home/home.css
index 24e06e7..7c27630 100644
--- a/src/home/home.css
+++ b/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;
 }
diff --git a/src/home/home.js b/src/home/home.js
index 92d70ff..e8a5ae9 100644
--- a/src/home/home.js
+++ b/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>
     );