From d1f77d8490a3a5b791a78dd52e56f07c8fe2d00a Mon Sep 17 00:00:00 2001 From: alinegfchagas Date: Wed, 15 Jun 2022 15:58:59 -0300 Subject: [PATCH 1/6] iniciando Produtos --- src/App.js | 3 +- src/Components/Produtos/Produtos.jsx | 96 ++++++++++++++++++++++++++++ src/Components/Produtos/Styled.jsx | 0 3 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 src/Components/Produtos/Produtos.jsx create mode 100644 src/Components/Produtos/Styled.jsx diff --git a/src/App.js b/src/App.js index b5a2c72..8664857 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React from 'react'; import styled from "styled-components" import Logo from "./img/logo.png" +import ListaProdutos from './Components/Produtos/Produtos'; const Container = styled.div` @@ -44,7 +45,7 @@ function App() {
- +
diff --git a/src/Components/Produtos/Produtos.jsx b/src/Components/Produtos/Produtos.jsx new file mode 100644 index 0000000..0537de5 --- /dev/null +++ b/src/Components/Produtos/Produtos.jsx @@ -0,0 +1,96 @@ +import React, { Component } from "react"; +import Imagem1 from '../../img/BigBoy.png' +import Imagem2 from '../../img/Goliath.png' +import Imagem3 from '../../img/Leonov.png' +import Imagem4 from '../../img/Liberator.png' +import Imagem5 from '../../img/Newpiranha.png' +import Imagem6 from '../../img/Nostromo.png' +import Imagem7 from '../../img/Phoenix.png' +import Imagem8 from '../../img/Vevengek.png' +import Imagem9 from '../../img/Yamato.png' + + +export default class ListaProdutos extends Component { + + state = { + produtos: [ + { + id: 1, + name: "BigBoy", + value: 10000.0, + imageUrl:'', + }, + { + id: 2, + name: "Goliath", + value: 10000.0, + imageUrl: , + }, + { + id: 3, + name: "Leonov", + value: 10000.0, + imageUrl: , + }, + { + id: 4, + name: "Liberator", + value: 10000.0, + imageUrl: , + }, + { + id: 5, + name: "Newpiranha", + value: 10000.0, + imageUrl: , + }, + { + id: 6, + name: "Nostromo", + value: 10000.0, + imageUrl: , + }, + { + id: 7, + name: "Phoenix", + value: 10000.0, + imageUrl: , + }, + { + id: 8, + name: "Vevengek", + value: 10000.0, + imageUrl: , + }, + { + id: 9, + name: "Yamato", + value: 10000.0, + imageUrl: , + }, + + + ] + } + + render() { + const renderizarProdutos = this.state.produtos.map((produto) => { + + return ( +
+ +

R$:{produto.value}

+ +
+ ) + } + ) + + + return (
+ {renderizarProdutos} +
) + + } + +} diff --git a/src/Components/Produtos/Styled.jsx b/src/Components/Produtos/Styled.jsx new file mode 100644 index 0000000..e69de29 From 27c87383badf423af874ba8d95ca3af7bab1e50e Mon Sep 17 00:00:00 2001 From: alinegfchagas Date: Wed, 15 Jun 2022 16:30:04 -0300 Subject: [PATCH 2/6] ajuste imagens --- src/App.js | 4 ++- src/Components/Produtos/Produtos.jsx | 42 ++++++++++++++++++++-------- 2 files changed, 33 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 8664857..3d5c458 100644 --- a/src/App.js +++ b/src/App.js @@ -30,7 +30,9 @@ const Filtros = styled.div` const Produtos = styled.div` grid-column: 5/span 12; - background-color: yellow; + display: flex; + flex-direction: row; + ` diff --git a/src/Components/Produtos/Produtos.jsx b/src/Components/Produtos/Produtos.jsx index 0537de5..514b847 100644 --- a/src/Components/Produtos/Produtos.jsx +++ b/src/Components/Produtos/Produtos.jsx @@ -1,4 +1,5 @@ import React, { Component } from "react"; +import styled from "styled-components"; import Imagem1 from '../../img/BigBoy.png' import Imagem2 from '../../img/Goliath.png' import Imagem3 from '../../img/Leonov.png' @@ -9,6 +10,21 @@ import Imagem7 from '../../img/Phoenix.png' import Imagem8 from '../../img/Vevengek.png' import Imagem9 from '../../img/Yamato.png' +const Cards=styled.div` + display: flex; + flex-direction:column; + align-items: center; + justify-content: center; + border-radius: 8px; + border: 1px solid black; + max-width: 60%; + margin: 0; +` +const Imagem= styled.img` + width: 50%; +` + + export default class ListaProdutos extends Component { @@ -18,55 +34,55 @@ export default class ListaProdutos extends Component { id: 1, name: "BigBoy", value: 10000.0, - imageUrl:'', + imageUrl:Imagem1, }, { id: 2, name: "Goliath", value: 10000.0, - imageUrl: , + imageUrl: Imagem2, }, { id: 3, name: "Leonov", value: 10000.0, - imageUrl: , + imageUrl: Imagem3, }, { id: 4, name: "Liberator", value: 10000.0, - imageUrl: , + imageUrl: Imagem4, }, { id: 5, name: "Newpiranha", value: 10000.0, - imageUrl: , + imageUrl: Imagem5, }, { id: 6, name: "Nostromo", value: 10000.0, - imageUrl: , + imageUrl: Imagem6, }, { id: 7, name: "Phoenix", value: 10000.0, - imageUrl: , + imageUrl: Imagem7, }, { id: 8, name: "Vevengek", value: 10000.0, - imageUrl: , + imageUrl: Imagem8, }, { id: 9, name: "Yamato", value: 10000.0, - imageUrl: , + imageUrl: Imagem9, }, @@ -77,18 +93,20 @@ export default class ListaProdutos extends Component { const renderizarProdutos = this.state.produtos.map((produto) => { return ( -
- + +

R$:{produto.value}

-
+ ) } ) return (
+ {renderizarProdutos} +
) } From e8fcbfe3bff9e54963e18128704e307b34577b7e Mon Sep 17 00:00:00 2001 From: alinegfchagas Date: Wed, 15 Jun 2022 16:47:28 -0300 Subject: [PATCH 3/6] =?UTF-8?q?estiliza=C3=A7=C3=A3o=20imagem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Produtos/Produtos.jsx | 40 +++++++++++++++++++--------- 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/src/Components/Produtos/Produtos.jsx b/src/Components/Produtos/Produtos.jsx index 514b847..666752c 100644 --- a/src/Components/Produtos/Produtos.jsx +++ b/src/Components/Produtos/Produtos.jsx @@ -17,12 +17,25 @@ const Cards=styled.div` justify-content: center; border-radius: 8px; border: 1px solid black; - max-width: 60%; - margin: 0; + width: 30%; + margin: 0 0 15px 0; + + ` const Imagem= styled.img` - width: 50%; + width: 30%; ` +const DivPai=styled.div` + display: flex; + box-sizing: border-box; + flex-wrap: wrap; + justify-content: space-evenly; + +` +const NomeProduto= styled.p` + font-size: large; + font-weight: bold; +` @@ -33,31 +46,31 @@ export default class ListaProdutos extends Component { { id: 1, name: "BigBoy", - value: 10000.0, + value: 10000, imageUrl:Imagem1, }, { id: 2, name: "Goliath", - value: 10000.0, + value: 15000, imageUrl: Imagem2, }, { id: 3, name: "Leonov", - value: 10000.0, + value: 30000, imageUrl: Imagem3, }, { id: 4, name: "Liberator", - value: 10000.0, + value: 18000, imageUrl: Imagem4, }, { id: 5, name: "Newpiranha", - value: 10000.0, + value: 17000, imageUrl: Imagem5, }, { @@ -69,19 +82,19 @@ export default class ListaProdutos extends Component { { id: 7, name: "Phoenix", - value: 10000.0, + value: 12000, imageUrl: Imagem7, }, { id: 8, name: "Vevengek", - value: 10000.0, + value: 40000, imageUrl: Imagem8, }, { id: 9, name: "Yamato", - value: 10000.0, + value: 30000, imageUrl: Imagem9, }, @@ -95,6 +108,7 @@ export default class ListaProdutos extends Component { return ( + {produto.name}

R$:{produto.value}

@@ -103,11 +117,11 @@ export default class ListaProdutos extends Component { ) - return (
+ return ( {renderizarProdutos} -
) + ) } From 6a3dddf7b2dd3b933ba2c1a74b6f8f91fe849ae4 Mon Sep 17 00:00:00 2001 From: alinegfchagas Date: Wed, 15 Jun 2022 17:09:47 -0300 Subject: [PATCH 4/6] styled --- src/Components/Produtos/Produtos.jsx | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/Components/Produtos/Produtos.jsx b/src/Components/Produtos/Produtos.jsx index 666752c..0d66a8c 100644 --- a/src/Components/Produtos/Produtos.jsx +++ b/src/Components/Produtos/Produtos.jsx @@ -46,55 +46,55 @@ export default class ListaProdutos extends Component { { id: 1, name: "BigBoy", - value: 10000, + value: 10.000, imageUrl:Imagem1, }, { id: 2, name: "Goliath", - value: 15000, + value: 15.000, imageUrl: Imagem2, }, { id: 3, name: "Leonov", - value: 30000, + value: 30.000, imageUrl: Imagem3, }, { id: 4, name: "Liberator", - value: 18000, + value: 18.000, imageUrl: Imagem4, }, { id: 5, name: "Newpiranha", - value: 17000, + value: 17.000, imageUrl: Imagem5, }, { id: 6, name: "Nostromo", - value: 10000.0, + value: 22.000, imageUrl: Imagem6, }, { id: 7, name: "Phoenix", - value: 12000, + value: 12.000, imageUrl: Imagem7, }, { id: 8, name: "Vevengek", - value: 40000, + value: 40.000, imageUrl: Imagem8, }, { id: 9, name: "Yamato", - value: 30000, + value: 30.000, imageUrl: Imagem9, }, @@ -117,12 +117,16 @@ export default class ListaProdutos extends Component { ) - return ( + return ( +
+

Quantidade de Produtos: {this.state.produtos.length}

+ + {renderizarProdutos} - ) - + +
) } } From 6798db1afd42d3a5659238a784a3e9f2773633ff Mon Sep 17 00:00:00 2001 From: alinegfchagas Date: Wed, 15 Jun 2022 17:33:58 -0300 Subject: [PATCH 5/6] =?UTF-8?q?=C3=BAltima=20do=20dia?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Produtos/Produtos.jsx | 84 +++++++++++++++++----------- 1 file changed, 50 insertions(+), 34 deletions(-) diff --git a/src/Components/Produtos/Produtos.jsx b/src/Components/Produtos/Produtos.jsx index 0d66a8c..d64c72c 100644 --- a/src/Components/Produtos/Produtos.jsx +++ b/src/Components/Produtos/Produtos.jsx @@ -10,7 +10,7 @@ import Imagem7 from '../../img/Phoenix.png' import Imagem8 from '../../img/Vevengek.png' import Imagem9 from '../../img/Yamato.png' -const Cards=styled.div` +const Cards = styled.div` display: flex; flex-direction:column; align-items: center; @@ -22,85 +22,95 @@ const Cards=styled.div` ` -const Imagem= styled.img` +const Imagem = styled.img` width: 30%; ` -const DivPai=styled.div` +const DivPai = styled.div` display: flex; box-sizing: border-box; flex-wrap: wrap; justify-content: space-evenly; ` -const NomeProduto= styled.p` +const NomeProduto = styled.p` font-size: large; font-weight: bold; -` +` export default class ListaProdutos extends Component { state = { + valorSelect: "Crescente", + produtos: [ { id: 1, name: "BigBoy", - value: 10.000, - imageUrl:Imagem1, - }, + value: 10000, + imageUrl: Imagem1, + }, { id: 2, name: "Goliath", - value: 15.000, + value: 15000, imageUrl: Imagem2, - }, + }, { id: 3, name: "Leonov", - value: 30.000, + value: 30000, imageUrl: Imagem3, - }, + }, { id: 4, name: "Liberator", - value: 18.000, + value: 18000, imageUrl: Imagem4, - }, + }, { id: 5, name: "Newpiranha", - value: 17.000, + value: 17000, imageUrl: Imagem5, - }, + }, { id: 6, name: "Nostromo", - value: 22.000, + value: 22000, imageUrl: Imagem6, - }, + }, { id: 7, name: "Phoenix", - value: 12.000, + value: 12000, imageUrl: Imagem7, - }, + }, { id: 8, name: "Vevengek", - value: 40.000, + value: 40000, imageUrl: Imagem8, - }, + }, { id: 9, name: "Yamato", - value: 30.000, + value: 30000, imageUrl: Imagem9, - }, + }, ] } + pegarOrdem = (event) => { + this.setState({ valorSelect: event.target.value }) + // this.state.produtos.value.sort(function (a, b) { + // if (a > b) return 1; + // if (a < b) return -1; + // return 0; + // }); + } render() { const renderizarProdutos = this.state.produtos.map((produto) => { @@ -109,7 +119,7 @@ export default class ListaProdutos extends Component { {produto.name} -

R$:{produto.value}

+

R$:{produto.value}

) @@ -118,15 +128,21 @@ export default class ListaProdutos extends Component { return ( -
-

Quantidade de Produtos: {this.state.produtos.length}

- - - - {renderizarProdutos} - - -
) +
+ +

Quantidade de Produtos: {this.state.produtos.length}

+

Ordenação:

+ + + + + {renderizarProdutos} + + +
) } } From 43ea17f19e5c5092e57226d199ecfb7badab573f Mon Sep 17 00:00:00 2001 From: alinegfchagas Date: Thu, 16 Jun 2022 18:25:56 -0300 Subject: [PATCH 6/6] hoover img/button --- src/Components/Produtos/Produtos.jsx | 38 +++++++++++++++++++++------- src/Components/Produtos/Styled.jsx | 0 2 files changed, 29 insertions(+), 9 deletions(-) delete mode 100644 src/Components/Produtos/Styled.jsx diff --git a/src/Components/Produtos/Produtos.jsx b/src/Components/Produtos/Produtos.jsx index d64c72c..52590b3 100644 --- a/src/Components/Produtos/Produtos.jsx +++ b/src/Components/Produtos/Produtos.jsx @@ -16,29 +16,46 @@ const Cards = styled.div` align-items: center; justify-content: center; border-radius: 8px; - border: 1px solid black; + /* border: 1px solid black; */ width: 30%; margin: 0 0 15px 0; - - + box-shadow: black 0.1em 0.1em 0.2em; ` const Imagem = styled.img` - width: 30%; + max-width: 80%; + align-items: center; + -moz-transition: all 0.3s; + -webkit-transition: all 0.3s; + transition: all 0.3s; +` +const ZoomImg = styled.div` + overflow: hidden; + &:hover{ + -moz-transform: scale(2.1); + -webkit-transform: scale(2.1); + transform: scale(2.1); + background-color: white; + justify-content: center; +} ` + const DivPai = styled.div` display: flex; box-sizing: border-box; flex-wrap: wrap; justify-content: space-evenly; - +` +const Botao = styled.button` + &:hover{ + box-shadow: #222121 0.1em 0.1em; + } + ` const NomeProduto = styled.p` font-size: large; font-weight: bold; ` - - export default class ListaProdutos extends Component { state = { @@ -117,10 +134,13 @@ export default class ListaProdutos extends Component { return ( - + + + {produto.name}

R$:{produto.value}

- + Adicionar ao Carrinho + ) } diff --git a/src/Components/Produtos/Styled.jsx b/src/Components/Produtos/Styled.jsx deleted file mode 100644 index e69de29..0000000