Atualizações da tarde

src/App.js

@@ -4,71 +4,76 @@ import Carrinho from './Components/Carrinho/Carrinho';
 import Filtro from './Components/Filtro/Filtro';
 import Home from './Components/Home/Home'
 import QuantidadeProdutos from './Components/Home/QuantidadeProdutos';
-
 const Loja = styled.div`
-display: flex;
-flex-direction: column;
+display: grid;
+grid-template-columns: 1fr 1fr 1fr;
+/* flex-direction: column; */
 border: 1px solid black; 
 margin: 1vw;
-height: 99vh;
+/* height: 100vh; */
 width: 100vw;
 `
 const ContainerProdutos = styled.div `
 display: grid;
+background-color: red;
+grid-template-columns: 1fr 1fr 1fr 1fr;
+grid-template-rows: 1fr 1fr;
+/* height: 100vh; */
+/* width: 56vw; */
+/* margin-right: 20vh; */
+margin: 0;
+border: 1px solid black;
 `
-
 export default class App extends Component {
   produtos = [{
     id: 1,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
+    name: "Táxi Espaciais",
+    value: 50.0,
     imageUrl: "https://picsum.photos/200/200",
   },
   {
     id: 2,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
+    name: "Viagem à Lua",
+    value: 30.0,
     imageUrl: "https://picsum.photos/200/200",
   },
   {
     id: 3,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
+    name: "Destino: Planeta Kepler-10c",
+    value: 40.0,
     imageUrl: "https://picsum.photos/200/200",
   },
   {
     id: 4,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
+    name: "O asteróide BR (2014 KP4)",
+    value: 20.0,
     imageUrl: "https://picsum.photos/200/200",
   },
   {
     id: 5,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
+    name: "Passeio pelas estrelas IRAS",
+    value: 10.0,
     imageUrl: "https://picsum.photos/200/200",
   },
   {
     id: 6,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
+    name: "Foguete da Mis",
+    value: 84.0,
     imageUrl: "https://picsum.photos/200/200",
   },
   {
     id: 7,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
+    name: "Foguete da Miss",
+    value: 34.0,
     imageUrl: "https://picsum.photos/200/200",
   },
   {
     id: 8,
-    name: "Foguete da Missão Apollo 11",
+    name: "Foguete da Miss",
     value: 10000.0,
     imageUrl: "https://picsum.photos/200/200",
   },
   ]
-
-
   render() {
     const componentProduto = this.produtos.map((produto) => {
       return (
@@ -83,16 +88,13 @@ export default class App extends Component {
     }) 
     return(
       <Loja>
-        <Filtro />
-
-        <div>
-          <QuantidadeProdutos />
+        <Filtro />        
+        <ContainerProdutos>
+          {/* <QuantidadeProdutos /> */}
         {componentProduto}
-        </div>
-
+        </ContainerProdutos>        
         <Carrinho />
       </Loja>
     )
   }
-}
-
+}

src/Components/Filtro/Filtro.js

@@ -1,20 +1,24 @@
 import React, { Component } from 'react'
 import styled from 'styled-components'
-
 const BoxFiltro = styled.div`
 margin-top: 1vw;
 padding-left: 1vw;
 padding-right: 1vw;
 border: 1px solid black;
 height: 95vh;
-width: 22vw;
+width: 15vw;
 `
-
 export default class Filtro extends Component {
     render() {
         return (
             <BoxFiltro>
                 <h2>Filtros</h2>
+                <label> Orientação: </label>
+                 <select>
+                     <option>Preço: Crescente</option>
+                     <option>Preço: Decrescente</option>
+                </select>
+                <br></br>
                 <label for="VMin" > Valor Mínimo: </label>
                 <input id="VMin" type="number" onChange="" />
                 <label for="VMax"> Valor Máximo: </label>
@@ -26,4 +30,3 @@ export default class Filtro extends Component {
     }
 }
 
-

src/Components/Home/Home.js

@@ -1,18 +1,20 @@
 import React, { Component } from 'react'
 import styled from 'styled-components'
-
-
+const Produto = styled.div`
+margin: 0px; 
+border: 1px dotted black;
+/* height: 10vh; */
+background-color: green;
+`
 export default class Home extends Component {
-
     render() {
         return (
-
-                <div>
+                <Produto>
                     <img src={this.props.imageUrl} alt="" />
                     <p>{this.props.name}</p>
                     <p>{this.props.value}</p>
                     <button>Adicionar ao Carrinho</button>
-                </div>
+                </Produto>
         )
     }
-}
+}