PR de correção

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.md

@@ -1 +1 @@
-Sejam bem vindos ao Labe-commerce, esse repositório contém um esqueleto de app React e um .gitignore.
+Surge: https://tenuous-fowl.surge.sh/

package.json

@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.3.5"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,24 +1,13 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+
+import React from "react";
+import {Naves} from "./Components/Catalogo/Naves"
 
 function App() {
+
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+    <Naves />
     </div>
   );
 }

src/Components/Catalogo/Card.js

@@ -0,0 +1,16 @@
+import React from "react";
+import {Card, Imagem} from "./Style";
+
+
+export function CardProd ({ nome, preco, img }){
+
+    return(
+            <Card>
+                <p>{nome}</p>
+                <Imagem>
+                    <p>{img}</p>
+                </Imagem>
+                <p>R$ {preco}</p>
+            </Card>
+    );
+}

src/Components/Catalogo/Naves.js

@@ -0,0 +1,48 @@
+import React, {useState} from "react";
+import { productList } from "../../productList";
+import { CardProd } from "./Card"
+import Filtros from "../Filtros/Filtro"
+import { Catalogo, Pagina } from "./StyledCatalogo"
+
+export function Naves() {
+
+  const [valorMaximo, setValorMaximo] = useState(1000000)
+  const [valorMinimo, setValorMinimo] = useState(0)
+  const [busca, setBusca] = useState("")
+
+  const listaNaves = productList
+  .filter((product) => {
+    return product.nome.toLowerCase().includes(busca)
+  })
+  .filter((product) => {
+    return product.preco >= valorMinimo || valorMinimo === ""
+  })
+  .filter((product) => {
+    return product.preco <= valorMaximo || valorMaximo === ""
+  })
+
+  .map((product) => {
+
+    return <CardProd key={product.id}
+     nome={product.nome}
+     img={product.img}
+     preco={product.preco}
+   />
+   })
+
+    return (
+      <Pagina>
+        <Filtros
+          valorMaximo={valorMaximo}
+          valorMinimo={valorMinimo}
+          busca={busca}
+          setValorMaximo={setValorMaximo}
+          setValorMinimo={setValorMinimo}
+          setBusca={setBusca}
+        />
+        <Catalogo>
+          {listaNaves}      
+        </Catalogo>
+      </Pagina>
+  );
+}       

src/Components/Catalogo/Style.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+export const Card = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding-top: 1%;
+    margin-top: 1%;
+    margin-left: 1%;
+    width: 100%;
+    height: auto;
+    box-shadow: 2px 2px 5px 2px Lightgray;
+    text-align: center;
+    align-items: center;
+    background-color: white;
+    border-radius:10px;
+`
+
+export const Imagem = styled.div`
+    object-fit: contain;
+    img{
+        width: 40%;
+    }
+`

src/Components/Catalogo/styledCatalogo.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const Catalogo = styled.div`
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 2%;
+    margin: 1%;
+`
+
+export const Pagina = styled.div`
+    display: flex;
+    flex-direction: row;
+    border-radius: 10px;
+
+`

src/Components/Filtros/Filtro.js

@@ -0,0 +1,33 @@
+import React from "react";
+import {Inputs} from "./style"
+
+function Filtros(props){
+   const {
+    valorMaximo, setValorMaximo, valorMinimo, setValorMinimo, busca, setBusca
+   } = props
+
+    function valorMax (event) {
+        setValorMaximo(event.target.value);
+    }
+    function valorMin (event) {
+        setValorMinimo(event.target.value);
+    }
+    function filtroBusca (event) {
+        setBusca(event.target.value);
+    }
+    return(
+        <div>
+            <Inputs>
+                <label for="valor máximo"> Valor máximo: </label>
+                <input name="valor máximo" value={valorMaximo} type="number" onChange={valorMax}/>
+
+                <label for="valor mínimo"> Valor mínimo: </label>
+                <input name="valor mínimo" value={valorMinimo} type="number" onChange={valorMin}/>
+
+                <label for="busca"> Busca: </label>
+                <input name="busca" value={busca} onChange={filtroBusca}/>
+            </Inputs>
+        </div>
+    )
+}
+export default Filtros;

src/Components/Filtros/style.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const Inputs = styled.div`
+    display: flex; 
+    flex-direction: column; 
+    align-items: flex-start;
+    border: 30px black;
+    `
+

src/StyledApp.js

@@ -0,0 +1,12 @@
+
+import styled from "styled-components";
+
+export const Card = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const Catalogo= styled.div`
+  display: flex;
+  flex-direction: row;
+`;

src/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -11,7 +9,4 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+

src/productList.js

@@ -0,0 +1,52 @@
+import React from "react";
+import devastador from "./Img/devastador.png";
+import estrela from "./Img/estrela.png";
+import executor from "./Img/executor.png";
+import millenium from "./Img/millenium.png"
+import onibus from "./Img/onibus.png"
+import xwing from "./Img/x-wing.png"
+
+export const productList = [
+    {
+        id:1,
+        nome:"Estrela da Morte",
+        img: <img src={estrela} alt="Nave - Estrela da morte"/>,
+        preco: 20000
+    },
+
+    {
+        id:2,
+        nome:"Executor",
+        img: <img src={executor} alt="Nave - Executor"/>,
+        preco: 30000.00
+    },
+
+    {
+        id:3,
+        nome: "Millennium Falcon",
+        img: <img src={millenium} alt="Nave - Millenium Falcon"/>,
+        preco: 40000.00
+    },
+
+    {
+        id:4,
+        nome: "Devastador",
+        img: <img src={devastador} alt="Nave - Devastador"/>,
+        preco: 22000.00
+    },
+
+    {
+        id:5,
+        nome: "Ônibus Imperial",
+        img: <img src={onibus} alt="Nave - Ônibus Imperial"/>,
+        preco: 20500.00
+    },
+
+    {
+        id:6,
+        nome: "X-Wing",
+        img: <img src={xwing} alt="Nave - X-Wing"/>,
+        preco: 50000.00
+    }
+
+]