PR de Correção

src/App.css

@@ -1,5 +1,8 @@
 .App {
   text-align: center;
+  padding: 10px;
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 .App-logo {
@@ -36,3 +39,49 @@
     transform: rotate(360deg);
   }
 }
+
+.container-grid{
+  display: grid;
+  grid-template-columns: auto auto auto;
+  text-align: center;
+}
+
+.container-grid-produto{
+  display: grid;
+  grid-template-columns: auto auto auto;
+  padding: 10px;
+  grid-gap: 10px;
+}
+
+.produto {
+  border: 1px solid;
+  padding: 5px;
+  grid-gap: 7px;
+  display:grid;
+}
+
+.imagem {
+  width:150px;
+  height: 150px;
+  /*border-radius: 65px;*/
+}
+
+.botao-add-carrinho{
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: space-evenly;
+  justify-content: center;
+}
+
+.grid-container-filtro {
+  display: grid;
+  border: 1px solid;
+  grid-gap:5px;
+}
+
+.grid-container-carrinho {
+  display: grid;
+  border: 1px solid;
+  padding: 5px;
+
+}

src/App.js

@@ -1,26 +1,43 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { Component } from 'react';
 import './App.css';
+import Produto from "./components/Produto";
+import Carrinho from "./components/Carrinho";
+import Filtro from './components/Filtro'
 
-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>
-  );
+class App extends Component {
+
+  state = {
+    quantidade: 0
+  }
+
+  listaProduto = [
+    { id: 1, nome: 'Explorer 1', valor: 1000.00, caminhoImagem: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Explorer1.jpg/200px-Explorer1.jpg" },
+    { id: 2, nome: 'Explorer 6', valor: 1000.00, caminhoImagem: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Explorer_6_paddles_up.jpg/1200px-Explorer_6_paddles_up.jpg" },
+    { id: 3, nome: 'Vostok 1', valor: 4000.00, caminhoImagem: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Vostok_spacecraft.jpg/300px-Vostok_spacecraft.jpg" },
+    { id: 4, nome: 'Luna 10', valor: 4000.00, caminhoImagem: "https://upload.wikimedia.org/wikipedia/commons/9/93/Luna_10_Musee_du_Bourget_P1010504.JPG" },
+    { id: 5, nome: 'Mariner 9', valor: 6000.00, caminhoImagem: "https://upload.wikimedia.org/wikipedia/commons/1/11/Mariner09.jpg" },
+    { id: 6, nome: 'Venera 9', valor: 6000.00, caminhoImagem: "https://img.ibxk.com.br/2020/10/09/09001456809482.jpg" },
+  ];
+
+
+  onClickAddCarrinho = (id) => {
+    this.setState({quantidade: this.state.quantidade + 1});
+
+  }
+
+  render() {
+    return (
+      <div className="container-grid App" >
+        <Filtro />
+        <Produto
+          onClickAddCarrinho={this.onClickAddCarrinho}
+          produtos={this.listaProduto}
+        />
+        <Carrinho qtdeCarrinho={this.state.quantidade} />
+
+      </div>
+    );
+  }
 }
 
 export default App;

src/components/Carrinho.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+class Carrinho extends React.Component {
+    render() {
+        return( 
+            <div className="grid-container-carrinho">
+                <h1>Carrinho</h1>
+                <label>{this.props.qtdeCarrinho}</label>
+            </div>
+        );
+    }
+}
+
+export default Carrinho;

src/components/Filtro.js

@@ -0,0 +1,31 @@
+import React from "react";
+import Produto from './Produto';
+import '../App.css';
+
+class Filtro extends React.Component {
+    render() {
+        return (
+            <div className="grid-container-filtro">
+                <div>
+                    <h1>Filtro</h1>
+                </div>
+                <div>
+                    <label for="valor-min">Valor Minimo: </label>
+                    <input />
+                </div>
+                <div>
+                    <label for="valor-min">Valor Máximo: </label>
+                    <input />
+                </div>
+                <div>
+                    <label for="nome-produto">Nome: </label>
+                    <input />
+                </div>
+                <div>
+                    <button>Pesquisar</button>
+                </div>
+            </div>
+        );
+    }
+}
+export default Filtro;

src/components/FiltroNomeProduto.js

@@ -0,0 +1,27 @@
+import React from "react"
+
+function FiltroNomeProduto(props) {
+    const listaFiltrada = props.listaProduto.filter((listaProduto) => {
+        if (listaProduto.nome.includes(props.nome)) {
+            return true 
+        } else {
+            return false
+        }
+
+    })
+
+
+    console.log(listaFiltrada)
+    return (
+        <div>
+            <h3>Nome Produto</h3>
+            <ul>
+                {listaFiltrada.map(listaProduto => {
+                    return <li>{listaProduto.nome}</li>;
+                })}
+            </ul>
+        </div>
+    )
+}
+
+export default FiltroNomeProduto;

src/components/FiltroValorProduto.js

@@ -0,0 +1,32 @@
+import React from "react"
+
+function FiltroValorProduto(props) {
+    const listaFiltrada = props.listaProduto.filter((listaProduto) => {
+        if (listaProduto.valor > props.min){
+            return true 
+        } else {
+            return false
+        }
+
+    }).filter((valor) => {
+        if (listaProduto.valor < props.max){
+            return true
+        } else {
+            return false
+        }
+    })
+
+    console.log(listaFiltrada)
+    return (
+        <div>
+            <h3>Valor</h3>
+            <ul>
+                {listaFiltrada.map(valor => {
+                    return <li>{valor}</li>;
+                })}
+            </ul>
+        </div>
+    )
+}
+
+export default FiltroValorProduto;

src/components/Produto.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import '../App.css';
+
+class Produto extends React.Component {
+
+    listaFinalDeProdutos = this.props.produtos.map((prdt) => {
+        return (
+            <div className="produto">
+                <div>
+                    <img src={prdt.caminhoImagem} className="imagem" />
+                </div>
+                <div>
+                    <span>{prdt.nome}</span>
+                </div>
+                <div>
+                    <span> <b>Valor:</b> R$ {prdt.valor}</span>
+                </div>
+                <button onClick={() => this.props.onClickAddCarrinho(prdt.id)}> Adicionar ao Carrinho </button>
+            </div>
+        );
+
+    });
+
+    render() {
+        const produtos = this.listaFinalDeProdutos;
+        return (
+            <div className="container-grid-produto">
+                {produtos}
+            </div>);
+    }
+}
+
+export default Produto;