[estilização básica; configuração; funcionalidade]

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 (
-    <div>
-      <Filters/>
-      <Home/>
-      <Cart/>
-    </div>
+    <MainContainer>
+      <Filters 
+      minFilter={minFilter} 
+      setMinFilter={setMinFilter} 
+      maxFilter={maxFilter} 
+      setMaxFilter={setMaxFilter}
+      searchFilter={searchFilter}
+      setSearchFilter={setSearchFilter}/>
+      <Home 
+      amount={amount}
+      setAmount={setAmount}
+      cart={cart}
+      setCart={setCart}/>
+      <Cart
+      amount={amount}
+      setAmount={setAmount}
+      cart={cart}
+      setCart={setCart}/>
+    </MainContainer>
   );
 }
 

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%;
+`

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"
+  }
+]

projeto-labcommerce/src/Components/Filter/Filter.js

@@ -1,9 +1,20 @@
-function Filters() {
+import { FilterContainer } from "./FilterStyle";
+
+function Filters(props) {
+  const filter = (event) => {
+
+  }
+
     return (
-      <div>
-        <p>Filter</p>
-
-      </div>
+      <FilterContainer>
+        <h2>Filters</h2>
+        <p><b>Minimum Price:</b></p>
+        <input value={props.minFilter} onChange={filter}></input>
+        <p><b>Maximum Price:</b></p>
+        <input value={props.maxFilter} onChange={filter}></input>
+        <p><b>Search by name:</b></p>
+        <input value={props.searchFilter} onChange={filter}></input>
+      </FilterContainer>
     );
   }
 

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;
+`

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 (
-      <div>
-        <p>Home</p>
-
-      </div>
+      <>
+      <HomeContainer>
+        <TitleOne>Our Products:</TitleOne>
+        <TitleTwo>Order:
+        <select
+        value={ordination}
+        onChange={orderProducts}>
+          <option>Order</option>
+          <option>Price High</option>
+          <option>Price Low</option>
+        </select>
+        </TitleTwo>
+        <ProductCard
+            key={product.id}
+            product={product}/>
+
+      </HomeContainer>
+      </>
     );
   }
 

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;
+`

projeto-labcommerce/src/Components/ProductList/ProductCard/ProductCard.js

@@ -0,0 +1,31 @@
+import { ProductContainer } from "./ProductCardStyle";
+
+
+function ProductCard(props) {
+  console.log({props})
+    return (
+    <>
+    <ProductContainer>
+    <img alt="image" src={`https://picsum.photos/300/335?a=${props.product[0].id}`}/>
+    <p><b>Product:</b> {props.product[0].name} </p>
+    <p><b>Price:</b> US${props.product[0].value}</p>
+    <button>Add to Cart</button>    
+    </ProductContainer>
+    <ProductContainer>
+    <img alt="image" src={`https://picsum.photos/300/335?a=${props.product[1].id}`}/>
+    <p><b>Product:</b> {props.product[1].name} </p>
+    <p><b>Price:</b> US${props.product[1].value}</p>
+    <button>Add to Cart</button>    
+    </ProductContainer>
+    <ProductContainer>
+    <img alt="image" src={`https://picsum.photos/300/335?a=${props.product[2].id}`}/>
+    <p><b>Product:</b> {props.product[2].name} </p>
+    <p><b>Price:</b> US${props.product[2].value}</p>
+    <button>Add to Cart</button>    
+    </ProductContainer>
+
+    </>
+    );
+  }
+
+  export default ProductCard;

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;
+`

projeto-labcommerce/src/Components/ShoppingCart/Cart/Cart.js

@@ -1,9 +1,15 @@
+import {CartContainer} from "./CartStyle"
+
 function Cart() {
     return (
-      <div>
-        <p>Cart</p>
+      <CartContainer>
+        <h2>Cart</h2>
+        <p><b>Products:</b></p>
+        <p><b>x0 Product Name</b></p>
+        <button>Remove</button>
+        <p><b>Total price:</b> US$0,00</p>
 
-      </div>
+      </CartContainer>
     );
   }
 

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;
+`