Filtros

src/App.js

@@ -18,7 +18,7 @@ const Main = styled.div`
   background-color: yellow;
 `
 
-const MenuEsquerdo = styled.div`
+const SideBar = styled.div`
   width: 15%;
   display: flex;
   background-color: white;
@@ -27,24 +27,72 @@ const MenuEsquerdo = styled.div`
   justify-content: center;
 `
 
-export default class App extends React.Component{
-  render(){
-    return(
+const ProductsSection = styled.div`
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  grid-template-rows :auto ;
+`
+
+export default class App extends React.Component {
+  state = {
+    products: [
+      {name:'teste', price:500},
+      {name:'teste', price:200},
+    ],
+    minprice: 100,
+    maxprice: 1000,
+    name: 'Teste'
+  }
+
+
+  onChangeMinPrice = (event) => {
+    this.setState({ minprice: event.target.value })
+  }
+  onChangeMaxPrice = (event) => {
+    this.setState({ maxprice: event.target.value })
+  }
+
+  onChangeName = (event) => {
+    this.setState({ name: event.target.value })
+  }
+
+  showProducts = () => 
+      this.state.products.map((product,index)=>{
+      if(product.price >= this.state.minprice && product.price <= this.state.maxprice){
+        return(
+          <Produtos price={product.price} name={product.name} key={index} />
+        )
+      }
+    })
+
+
+
+  render() {
+    return (
       <Wrapper>
         <Header>
 
         </Header>
 
         <Main>
-            <MenuEsquerdo>
-                <Filtros/>
-            </MenuEsquerdo>
+          <SideBar>
+            <Filtros
+
+              minprice={this.state.minprice}
+              maxprice={this.state.maxprice}
+              name={this.state.name}
+              changeminprice={this.onChangeMinPrice}
+              changemaxprice={this.onChangeMaxPrice}
+              changename={this.onChangeName}
+
+            />
+          </SideBar>
 
-            <div>
-                <Produtos/>
-            </div>
+          <ProductsSection>
+            {this.showProducts()}
+          </ProductsSection>
         </Main>
       </Wrapper>
-      )
+    )
   }
 }

src/components/filtros/Filtros.js

@@ -20,27 +20,15 @@ const Inputs = styled.input`
 `
 
 class Filtros extends React.Component {
-    state ={
-        maxprice:0,
-        minprice:0,
-        name:''
-    }
-
-    onChangeMinPrice(event){
-        this.setState({minprice:event.target.value})
-    }
-    onChangeMaxPrice(event){
-        this.setState({maxprice:event.target.value})
-    }
-    onChangeName(event){
-        this.setState({name:event.target.value})
-    }
+
+
+
     render() {
         return (
             <Wrapper>
-                <Inputs value={this.state.minprice} onChange={this.onChangeMinPrice} placeholder='Preço minimo' />
-                <Inputs value={this.state.maxprice} onChange={this.onChangeMaxPrice} placeholder='Preço Máximo' />
-                <Inputs value={this.state.name} onChange={this.onChangeName} placeholder='Nome do produto'/>
+                <Inputs value={this.props.minprice} onChange={this.props.changeminprice} placeholder='Preço minimo' />
+                <Inputs value={this.props.maxprice} onChange={this.props.changemaxprice} placeholder='Preço Máximo' />
+                <Inputs value={this.props.name} onChange={this.props.changename} placeholder='Nome do produto'/>
 
             </Wrapper>
         )

src/components/produto/Produto.js

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 const Wrapper = styled.div`
     border-style: solid;
+    height: 350px;
 `
 const Image = styled.img`
     width: 300px;
@@ -13,8 +14,9 @@ class Produtos extends React.Component{
         return(
             <Wrapper>
                 <Image src='https://i2.wp.com/excelenciaeducacao.com.br/wp-content/uploads/2021/01/placeholder.png?ssl=1' />
-                <p>Nome</p>
-                <p>Preço</p>
+                <p>{this.props.name}</p>
+                <p>{this.props.price}</p>
+                <button>Comprar</button>
 
             </Wrapper>
         )