Reenvio de projeto

App.js

@@ -0,0 +1,67 @@
+import Filters from "./Components/FiltrosEOrdenacao/FiltroseOrdenacao";
+import Produtos from "./Components/Home/Produtos/Produtos";
+import Cart from "./Components/Carrinho/Cart/Carrinho";
+import { useState } from "react";
+import productList from "./ProductList";
+import GlobalStyled from './GlobalStyle'
+import { Header } from "./Components/Header/Header";
+
+
+export default function App() {
+
+  const [minFilter, setMinFilter] = useState(-Infinity);
+  const [maxFilter, setMaxFilter] = useState(Infinity);
+  const [searchFilter, setSearchFilter] = useState("");
+  const [cart, setCart] = useState([]);
+  const [amount, setAmount] = useState(0);
+
+  const filteredProductList = productList
+    .filter((product) => {
+      if (product.value >= minFilter) {
+        return true;
+      } else {
+        return false;
+      }
+    })
+    .filter((product) => {
+      if (product.value <= maxFilter) {
+        return true;
+      } else {
+        return false;
+      }
+    })
+    .filter((product) => {
+      return product.name
+        .toLocaleLowerCase()
+        .includes(searchFilter.toLocaleLowerCase());
+    });
+
+  console.log("App", cart);
+  return (
+  <>
+
+      <Header/>
+      <Filters
+        minFilter={minFilter}
+        setMinFilter={setMinFilter}
+        maxFilter={maxFilter}
+        setMaxFilter={setMaxFilter}
+        searchFilter={searchFilter}
+        setSearchFilter={setSearchFilter}
+      />
+      <Produtos
+        productList={filteredProductList}
+        amount={amount}
+        setAmount={setAmount}
+        setCart={setCart}
+        cart={cart}
+      />
+      <Cart
+        amount={amount}
+        setAmount={setAmount}
+        cart={cart}
+        setCart={setCart}
+      />
+    </>
+  );
+}

Components/Carrinho/Cart/Carrinho.js

@@ -0,0 +1,57 @@
+import Items from "../Itens/Item";
+import { CartDiv } from "./CarrinhoStyled";
+
+const Cart = (props) => {
+  const SaveCartToLocalStorage = (cartNew) => {
+    const cartJson = JSON.stringify(cartNew);
+    localStorage.setItem("cart", cartJson);
+  };
+
+  const removeProduct = (product) => {
+    let cartNew = "";
+    if (product.quantity === 1) {
+      cartNew = props.cart.filter((item) => {
+        if (item.id === product.id) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+      props.setCart(cartNew);
+    } else {
+      cartNew = props.cart.map((item) => {
+        if (item.id === product.id) {
+          return { ...item, quantity: item.quantity - 1 };
+        } else {
+          return item;
+        }
+      });
+      props.setCart(cartNew);
+      SaveCartToLocalStorage(cartNew);
+    }
+    props.setAmount(props.amount - product.value);
+  };
+
+  const cartMapped =
+    props.cart &&
+    props.cart.map((item) => {
+      return (
+        <Items
+          key={props.id}
+          name={item.name}
+          quantity={item.quantity}
+          removeProduct={() => removeProduct(item)}
+        />
+      );
+    });
+
+  return (
+    <CartDiv>
+      <h2>Carrinho</h2>
+      {cartMapped}
+      <p>Valor Total:R${props.amount.toFixed(2)}</p>
+    </CartDiv>
+  );
+};
+
+export default Cart;

Components/Carrinho/Cart/CarrinhoStyled.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const CartDiv = styled.div`
+  border: 2px dashed #9E4784; 
+  background-color: rgba(158, 71, 132); 
+  padding: 10px; 
+  color: black; 
+  font-family: 'Mina', sans-serif;
+`;

Components/Carrinho/Itens/Item.js

@@ -0,0 +1,15 @@
+import { ButtonItems, ItemsDiv, ItemsText } from "./ItensStyled";
+
+const Items = (props) => {
+  return (
+    <div>
+      <ItemsDiv>
+        <ItemsText>{props.quantity}x</ItemsText>
+        <ItemsText>{props.name}</ItemsText>
+        <ButtonItems onClick={props.removeProduct}>REMOVER</ButtonItems>
+      </ItemsDiv>
+    </div>
+  );
+};
+
+export default Items;

Components/Carrinho/Itens/ItensStyled.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const ItemsDiv = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 10px 0px;
+`;
+export const ItemsText = styled.p`
+  display: flex;
+  margin: 5px;
+
+`;
+
+export const ButtonItems = styled.button`
+  display: flex;
+  padding: 2px 5px;
+  text-align: center;
+  background-color: RGB(210, 118, 133) ;
+  font-family: 'Mina', sans-serif;
+  border-radius: 10%;
+  text-decoration: none;
+  border: transparent;
+  color: white;
+`;

Components/FiltrosEOrdenacao/FiltroStyled.js

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+const StyledFiltro = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(3, 1fr); 
+  grid-gap: 1px;
+  padding: 2% 0;
+  font-family: 'Mina', sans-serif;
+  align-items: center;
+  justify-items: center;
+
+  .busca, .valor, .ordem {
+    appearance: none;
+    border: .2em solid #37306B;
+    outline: none;
+    border-bottom: .2em solid #37306B;
+    background: rgba(102, 52, 127, 0.2); 
+    border-radius: 2em;
+    padding: .4em 1rem; 
+    color: #66347F;
+    width: 30%; 
+    font-family: 'Mina', sans-serif;
+  }
+
+  .busca {
+    width: 30%;
+  }
+
+  .valor {
+    width: 10%;
+  }
+
+  .ordem {
+    width: 20%;
+  }
+
+  .textoOrdem {
+    color: #37306B;
+    padding: 0;
+  }
+
+  button {
+    appearance: none;
+    border: .2em solid #37306B;
+    background: transparent;
+    padding: .85em 1.5em;
+    color: #66347F;
+    border-radius: 2em;
+    transition: background 1s, color 1s; 
+    &:hover, &:focus, &:active {
+      background: #37306B;
+      color: #fff;
+    }
+  }
+`;
+
+export default StyledFiltro;

Components/FiltrosEOrdenacao/FiltroseOrdenacao.js

@@ -0,0 +1,50 @@
+import StyledFiltro from "./FiltroStyled";
+import { useState } from "react";
+import productList from "../../ProductList";
+
+const Filters = (props) => {
+  const handleInputMinFilter = (e) => {
+    props.setMinFilter(e.target.value);
+  };
+
+  const handleInputMaxFilter = (e) => {
+    props.setMaxFilter(e.target.value);
+  };
+
+  const handleInputSearchFilter = (e) => {
+    props.setSearchFilter(e.target.value);
+  };
+
+  return (
+
+    <StyledFiltro>
+      <input
+        name="pesquisa"
+        className="busca"
+        placeholder="Aqui você encontra tudo :)"
+        value={props.pesquisa}
+        onChange={handleInputSearchFilter}
+      />
+      <input
+        name="precoMinimo"
+        className="valor"
+        placeholder="Preço Mínimo $"
+        type="number"
+        min={0}
+        onChange={handleInputMinFilter}
+        value={props.minFilter}
+      />
+      <input
+        name="precoMaximo"
+        className="valor"
+        placeholder="Preço Máximo $$$"
+        type={"number"}
+        min={0}
+        onChange={handleInputMaxFilter}
+        value={props.maxFilter}
+      />
+    </StyledFiltro>
+  );
+};
+
+export default Filters;

Components/Header/Carrinho.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+
+const Carrinho = () => {
+  const [itens, setItens] = useState([]); // Estado para armazenar os itens no carrinho
+  useEffect(() => {
+    const carrinhoNoLocalStorage = localStorage.getItem('carrinho');
+    if (carrinhoNoLocalStorage) {
+      setItens(JSON.parse(carrinhoNoLocalStorage));
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('carrinho', JSON.stringify(itens));
+  }, [itens]);
+
+  return (
+    <div className="carrinho">
+      <h2>Seu Carrinho</h2>
+      <ul>
+        {itens.map((item, index) => (
+          <li key={index}>
+            {item.nome} - Quantidade: {item.quantidade} - Preço: R$ {item.preco}
+            <button onClick={() => removerItem(index)}>Remover</button>
+          </li>
+        ))}
+      </ul>
+      <p>Total: R$ {calcularTotal()}</p>
+    </div>
+  );
+
+  const removerItem = (index) => {
+    const novosItens = [...itens];
+    novosItens.splice(index, 1);
+    setItens(novosItens);
+  };
+
+  // Função para calcular o valor total do carrinho
+  const calcularTotal = () => {
+    return itens.reduce((total, item) => total + item.preco * item.quantidade, 0);
+  };
+};
+
+export default Carrinho;

Components/Header/Header.js

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import Logo from "../../Image/LabeVerso.png";
+import { StyledHeader } from "./HeaderStyle";
+
+export const Header = () => {
+
+    return (
+    <StyledHeader>
+
+            <div className="menu">
+                <box-icon name="menu"></box-icon>
+            </div>
+            <a href="#">
+                <div className="logo">
+                    <img  src={Logo} alt="Astronalta pegando uma estrela" width="450"></img>
+                </div>
+            </a>
+            <ul>
+                <li>
+                    <a href="#"> Inicio</a>
+                </li>
+                <li>
+                    <a href="#"> Produtos</a>
+                </li>
+            </ul>
+
+    </StyledHeader>
+  );
+};