Finalizando e-commerce

README.md

@@ -1 +1,6 @@
 Sejam bem vindos ao Labe-commerce, esse repositório contém um esqueleto de app React e um .gitignore.
+
+
+Link do surge 
+
+http://magical-power.surge.sh/

src/App.js

@@ -34,12 +34,23 @@ function App() {
   };
   return (
     <div className="App">
-      <Header countCartItems={cartItems.length}></Header>
+      <Header className="row" countCartItems={cartItems.length}>
+
+      </Header>
       <div className="row">
-        <Filtros/>
+      <div>
+      <Filtros className="col-1">
+
+      </Filtros>
+        </div>
+        <div className="card">
         <Home products={produtos} onAdd={onAdd}></Home>
+        </div>
+
         <Carrinho
-
+         cartItems={cartItems}
+         onAdd={onAdd}
+         onRemove={onRemove}
         ></Carrinho>
       </div>
     </div>

src/components/Carrinho.js

@@ -2,12 +2,67 @@ import React from 'react';
 
 export default function Carrinho(props) {
   const { cartItems, AddCar, onRemove } = props;
-
+  const itemsPrice = cartItems.reduce((a, c) => a + c.qty * c.price, 0);
+  const taxPrice = itemsPrice * 0.14;
+  const shippingPrice = itemsPrice > 2000 ? 0 : 20;
+  const totalPrice = itemsPrice + taxPrice + shippingPrice;
   return (
     <aside className="block col-1">
-      <h2>Itens do Carrinho </h2>
+      <h2>Itens do Carrinho</h2>
       <div>
-
+        {cartItems.length === 0 && <div>Carrinho está vazio</div>}
+        {cartItems.map((item) => (
+          <div key={item.id} className="row">
+            <div className="col-2">{item.name}</div>
+            <div className="col-2">
+              <button onClick={() => onRemove(item)} className="remove">
+                -
+              </button>{' '}
+              <button onClick={() => AddCar(item)} className="add">
+                +
+              </button>
+            </div>
+
+            <div className="col-2 text-right">
+              {item.qty} x ${item.price.toFixed(2)}
+            </div>
+          </div>
+        ))}
+
+        {cartItems.length !== 0 && (
+          <>
+            <hr></hr>
+            <div className="row">
+              <div className="col-2">Preço Item</div>
+              <div className="col-1 text-right">R$ {itemsPrice.toFixed(2)}</div>
+            </div>
+            <div className="row">
+              <div className="col-2">Taxas e Impostos</div>
+              <div className="col-1 text-right">R$ {taxPrice.toFixed(2)}</div>
+            </div>
+            <div className="row">
+              <div className="col-2">Outros Custos</div>
+              <div className="col-1 text-right">
+                R$ {shippingPrice.toFixed(2)}
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="col-2">
+                <strong>Valor Total</strong>
+              </div>
+              <div className="col-1 text-right">
+                <strong>R$ {totalPrice.toFixed(2)}</strong>
+              </div>
+            </div>
+            <hr />
+            <div className="row">
+              <button onClick={() => alert('Compra realizada com sucesso!')}>
+                Finalizar Compra
+              </button>
+            </div>
+          </>
+        )}
       </div>
     </aside>
   );

src/components/Filtros.js

@@ -1,13 +1,45 @@
-     import React from 'react'
+import React from 'react'
 
-     export function Filtros() {
-
-
-       return(
-        <div className="row">
-
-        </div>
-       )    
-    };
-
-     export default Filtros;
+export function Filtros(props) {
+
+
+  return(
+   <div className="">
+
+ <input
+    placeholder="Nome do Produto"
+    value={props.query}
+    onChange={(ev) => props.setQuery(ev.target.value)}
+ />
+
+
+    <input
+    type="number"
+    placeholder="Preço mínimo"
+    value={props.minPrice}
+    onChange={(ev) => props.setMinPrice(ev.target.value)}
+   />
+
+
+   <input
+    type="number"
+    placeholder="Preço máximo"
+    value={props.maxPrice}
+    onChange={(ev) => props.setMaxPrice(ev.target.value)}
+   />
+
+
+   <select
+    value={props.order}
+    onChange={(ev) => props.setOrder(ev.target.value)}
+ >
+    <option value={"asc"}>Crescente</option>
+    <option value={"desc"}>Decrescente</option>
+
+ </select>
+
+   </div>
+  )    
+};
+
+export default Filtros;

src/components/Home.js

@@ -6,7 +6,7 @@ export default function Home(props) {
   return (
     <main className="block col-2">
       <h2>Produtos</h2>
-      <div className="row">
+      <div className="row-1">
         {products.map((product) => (
           <Product key={product.id} product={product} onAdd={onAdd}></Product>
         ))}

src/components/Product.js

@@ -6,7 +6,7 @@ export default function Product(props) {
     <div>
       <img className="small" src={product.image} alt={product.name} />
       <h3>{product.name}</h3>
-      <div>${product.price}</div>
+      <div>R$ {product.price},00</div>
       <div>
         <button onClick={() => onAdd(product)}>Adicionar no Carrinho</button>
       </div>

src/index.css

@@ -18,39 +18,51 @@ h3 {
 a {
   text-decoration: none;
 }
-.row {
+.row-1 {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
+
 }
 .row.center {
   align-items: center;
 }
 .col-1 {
   flex: 1;
+
 }
 .col-2 {
   flex: 2;
+
 }
-.bloco {
-  background-color: #e0e0e0;
+.block {
+  background-color: #aaa0a0;
   padding: 1rem;
   margin: 0.5rem;
   border-radius: 0.5rem;
+
 }
 .text-right {
-  text-align: right;
+  text-align: center;
+}
+.small {
+  display: block;
+  padding: 0.5rem;
+  align-items: center;
+
 }
 img.small {
-  max-height: 8rem;
+  max-height: 12rem;
+
+
 }
 button {
   font-size: 0.8rem;
   padding: 0.2rem;
   margin: 0.1rem;
   border-radius: 0.5rem;
-  border: 0.1rem #404040 solid;
-  background-color: #f0c040;
-  width: 100%;
+  border: 0.1rem #4e0000 solid;
+  background-color: #5a1500;
+  color: #ffffff;
   cursor: pointer;
 }
 button.add {
@@ -67,3 +79,7 @@ button.badge {
   color: #ffffff;
   width: 1.5rem;
 }
+.card{
+  display: flex;
+
+}