From 177d01f700948fb033bbe26ca2c94a3ec72d5153 Mon Sep 17 00:00:00 2001 From: Lipeli Date: Mon, 25 Sep 2023 17:17:48 -0300 Subject: [PATCH] =?UTF-8?q?[estiliza=C3=A7=C3=A3o=20b=C3=A1sica;=20configu?= =?UTF-8?q?ra=C3=A7=C3=A3o;=20funcionalidade]=20Aplicado=20a=20estiliza?= =?UTF-8?q?=C3=A7=C3=A3o=20b=C3=A1sica,=20estrutura=20do=20fluxo,=20aplica?= =?UTF-8?q?=C3=A7=C3=A3o=20dos=20inputs=20controlados=20no=20select=20e=20?= =?UTF-8?q?distribu=C3=ADdo=20os=20dados=20do=20projeto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projeto-labcommerce/src/App.js | 34 +++++++++++++++---- projeto-labcommerce/src/AppStyle.js | 10 ++++++ projeto-labcommerce/src/Assets/product.json | 20 +++++++++++ .../src/Components/Filter/Filter.js | 21 +++++++++--- .../src/Components/Filter/FilterStyle.js | 14 ++++++++ .../src/Components/ProductList/Home/Home.js | 34 ++++++++++++++++--- .../Components/ProductList/Home/HomeStyle.js | 23 +++++++++++++ .../ProductList/ProductCard/ProductCard.js | 31 +++++++++++++++++ .../ProductCard/ProductCardStyle.js | 9 +++++ .../src/Components/ShoppingCart/Cart/Cart.js | 12 +++++-- .../Components/ShoppingCart/Cart/CartStyle.js | 12 +++++++ 11 files changed, 201 insertions(+), 19 deletions(-) create mode 100644 projeto-labcommerce/src/AppStyle.js create mode 100644 projeto-labcommerce/src/Assets/product.json diff --git a/projeto-labcommerce/src/App.js b/projeto-labcommerce/src/App.js index d827e70a86..5edb431227 100644 --- a/projeto-labcommerce/src/App.js +++ b/projeto-labcommerce/src/App.js @@ -1,15 +1,37 @@ -import './App.css'; import Filters from "./Components/Filter/Filter" import Home from "./Components/ProductList/Home/Home" import Cart from "./Components/ShoppingCart/Cart/Cart" +import { MainContainer } from "./AppStyle"; +import { useState } from "react"; + export default function App() { + const [minFilter, setMinFilter] = useState(""); + const [maxFilter, setMaxFilter] = useState(""); + const [searchFilter, setSearchFilter] = useState(""); + const [cart, setCart] = useState(""); + const [amount, setAmount] = useState(""); + return ( -
- - - -
+ + + + + ); } diff --git a/projeto-labcommerce/src/AppStyle.js b/projeto-labcommerce/src/AppStyle.js new file mode 100644 index 0000000000..a92dd70417 --- /dev/null +++ b/projeto-labcommerce/src/AppStyle.js @@ -0,0 +1,10 @@ +import styled from "styled-components"; + +export const MainContainer = styled.div` +display: flex; +flex-direction: block; +margin: 10px; +gap: 2rem; +background-color: gray; +height: 100%; +` \ No newline at end of file diff --git a/projeto-labcommerce/src/Assets/product.json b/projeto-labcommerce/src/Assets/product.json new file mode 100644 index 0000000000..c5938b5747 --- /dev/null +++ b/projeto-labcommerce/src/Assets/product.json @@ -0,0 +1,20 @@ +[ + { + "id": 1, + "name": "produto 1", + "value": 10000.0, + "imageUrl": "https://picsum.photos/300/335?a=1" + }, + { + "id": 2, + "name": "Exemplo 2", + "value": 5000.0, + "imageUrl": "https://picsum.photos/300/335?a=2" + }, + { + "id": 3, + "name": "Item 3", + "value": 500.0, + "imageUrl": "https://picsum.photos/300/335?a=3" + } +] \ No newline at end of file diff --git a/projeto-labcommerce/src/Components/Filter/Filter.js b/projeto-labcommerce/src/Components/Filter/Filter.js index 1c7eeaf21c..39c48949e6 100644 --- a/projeto-labcommerce/src/Components/Filter/Filter.js +++ b/projeto-labcommerce/src/Components/Filter/Filter.js @@ -1,9 +1,20 @@ -function Filters() { +import { FilterContainer } from "./FilterStyle"; + +function Filters(props) { + const filter = (event) => { + + } + return ( -
-

Filter

- -
+ +

Filters

+

Minimum Price:

+ +

Maximum Price:

+ +

Search by name:

+ + ); } diff --git a/projeto-labcommerce/src/Components/Filter/FilterStyle.js b/projeto-labcommerce/src/Components/Filter/FilterStyle.js index e69de29bb2..8485722dc3 100644 --- a/projeto-labcommerce/src/Components/Filter/FilterStyle.js +++ b/projeto-labcommerce/src/Components/Filter/FilterStyle.js @@ -0,0 +1,14 @@ +import styled from "styled-components"; + +export const FilterContainer = styled.div` +display: grid; +justify-content: left; +align-items: center; +gap: 2rem; +background-color: orange; +border: solid 1px black; +width: 250px; +margin: 10px; +padding: 10px; +height: 50rem; +` \ No newline at end of file diff --git a/projeto-labcommerce/src/Components/ProductList/Home/Home.js b/projeto-labcommerce/src/Components/ProductList/Home/Home.js index 3c16bde741..a88fc340c0 100644 --- a/projeto-labcommerce/src/Components/ProductList/Home/Home.js +++ b/projeto-labcommerce/src/Components/ProductList/Home/Home.js @@ -1,9 +1,33 @@ -function Home() { +import { HomeContainer, TitleOne, TitleTwo } from "./HomeStyle"; +import ProductCard from "../ProductCard/ProductCard" +import product from "../../../Assets/product.json" +import { useState } from "react"; + +function Home(props) { + const [ordination, setOrdination] = useState(""); + + const orderProducts = (event) => { + setOrdination(event.target.value) + } return ( -
-

Home

- -
+ <> + + Our Products: + Order: + + + + + + ); } diff --git a/projeto-labcommerce/src/Components/ProductList/Home/HomeStyle.js b/projeto-labcommerce/src/Components/ProductList/Home/HomeStyle.js index e69de29bb2..8c03ed0972 100644 --- a/projeto-labcommerce/src/Components/ProductList/Home/HomeStyle.js +++ b/projeto-labcommerce/src/Components/ProductList/Home/HomeStyle.js @@ -0,0 +1,23 @@ +import styled from "styled-components"; + +export const HomeContainer = styled.div` +width: 100rem; +display: grid; +grid-template-columns: 1fr 1fr; +grid-template-rows: 1fr 1fr; +height: 1050px; +gap: 2rem; +padding: 30px; +text-align: center; +` + +export const OrderFilter = styled.select` +margin: 5px; +padding: 5px; +` +export const TitleOne = styled.h2` +height: 30px; +` +export const TitleTwo = styled.h3` +height: 30px; +` \ No newline at end of file diff --git a/projeto-labcommerce/src/Components/ProductList/ProductCard/ProductCard.js b/projeto-labcommerce/src/Components/ProductList/ProductCard/ProductCard.js index e69de29bb2..4f66e20452 100644 --- a/projeto-labcommerce/src/Components/ProductList/ProductCard/ProductCard.js +++ b/projeto-labcommerce/src/Components/ProductList/ProductCard/ProductCard.js @@ -0,0 +1,31 @@ +import { ProductContainer } from "./ProductCardStyle"; + + +function ProductCard(props) { + console.log({props}) + return ( + <> + + image +

Product: {props.product[0].name}

+

Price: US${props.product[0].value}

+ + + + image +

Product: {props.product[1].name}

+

Price: US${props.product[1].value}

+ + + + image +

Product: {props.product[2].name}

+

Price: US${props.product[2].value}

+ + + + + ); + } + + export default ProductCard; \ No newline at end of file diff --git a/projeto-labcommerce/src/Components/ProductList/ProductCard/ProductCardStyle.js b/projeto-labcommerce/src/Components/ProductList/ProductCard/ProductCardStyle.js index e69de29bb2..2665178486 100644 --- a/projeto-labcommerce/src/Components/ProductList/ProductCard/ProductCardStyle.js +++ b/projeto-labcommerce/src/Components/ProductList/ProductCard/ProductCardStyle.js @@ -0,0 +1,9 @@ +import styled from "styled-components"; + +export const ProductContainer = styled.div` +display: grid; +justify-content: center; +border: solid 1px black; +text-align: left; +background-color: white; +` \ No newline at end of file diff --git a/projeto-labcommerce/src/Components/ShoppingCart/Cart/Cart.js b/projeto-labcommerce/src/Components/ShoppingCart/Cart/Cart.js index b5ea69d353..f15522fad4 100644 --- a/projeto-labcommerce/src/Components/ShoppingCart/Cart/Cart.js +++ b/projeto-labcommerce/src/Components/ShoppingCart/Cart/Cart.js @@ -1,9 +1,15 @@ +import {CartContainer} from "./CartStyle" + function Cart() { return ( -
-

Cart

+ +

Cart

+

Products:

+

x0 Product Name

+ +

Total price: US$0,00

-
+ ); } diff --git a/projeto-labcommerce/src/Components/ShoppingCart/Cart/CartStyle.js b/projeto-labcommerce/src/Components/ShoppingCart/Cart/CartStyle.js index e69de29bb2..b83a98d500 100644 --- a/projeto-labcommerce/src/Components/ShoppingCart/Cart/CartStyle.js +++ b/projeto-labcommerce/src/Components/ShoppingCart/Cart/CartStyle.js @@ -0,0 +1,12 @@ +import styled from "styled-components"; + + + +export const CartContainer = styled.div` +border: solid 1px black; +width: 250px; +padding: 10px; +margin: 10px; +background-color: orange; +height: 30rem; +` \ No newline at end of file