Full Code of glautonOsorio/Garcia.Imoveis for AI

Repository: glautonOsorio/Garcia.Imoveis
Branch: main
Commit: 8f0cb5765fe8
Files: 62
Total size: 62.3 KB

Directory structure:
gitextract_iqqcaevt/

├── Diversão/
│   ├── .eslintrc.cjs
│   ├── .gitignore
│   ├── README.md
│   ├── index.html
│   ├── package.json
│   ├── src/
│   │   ├── App.css
│   │   ├── App.jsx
│   │   ├── components/
│   │   │   ├── BuscaProduto/
│   │   │   │   ├── BuscaProduto.component.jsx
│   │   │   │   └── BuscaProduto.styled.jsx
│   │   │   ├── Button/
│   │   │   │   ├── Button.component.jsx
│   │   │   │   └── Button.style.jsx
│   │   │   ├── CardProduto/
│   │   │   │   ├── CardProduto.component.jsx
│   │   │   │   └── CardProduto.styled.jsx
│   │   │   ├── Carrinho/
│   │   │   │   ├── Carrinho.component.jsx
│   │   │   │   └── Carrinho.style.jsx
│   │   │   ├── CarrinhoGlauton/
│   │   │   │   ├── CarrinhoGlauton.jsx
│   │   │   │   └── CarrinhoGlauton.style.jsx
│   │   │   ├── Checkout/
│   │   │   │   ├── CheckoutComponent.jsx
│   │   │   │   └── CheckoutComponent.style.jsx
│   │   │   ├── DeleteProduct/
│   │   │   │   └── DeleteProduct.jsx
│   │   │   ├── Error/
│   │   │   │   ├── Index.jsx
│   │   │   │   └── Style.css
│   │   │   ├── Footer/
│   │   │   │   ├── Footer.jsx
│   │   │   │   └── Footer.style.jsx
│   │   │   ├── Header/
│   │   │   │   ├── Header.jsx
│   │   │   │   ├── Header.styled.jsx
│   │   │   │   └── headerCss.css
│   │   │   ├── ItensCarrinho/
│   │   │   │   ├── ItensCarrinho.component.jsx
│   │   │   │   └── ItensCarrinho.style.jsx
│   │   │   ├── PrincipalBody/
│   │   │   │   ├── PrincipalBody.jsx
│   │   │   │   └── PrincipalBody.style.jsx
│   │   │   ├── Quantidade/
│   │   │   │   ├── Quantidade.component.jsx
│   │   │   │   └── Quantidade.style.jsx
│   │   │   ├── Resumo/
│   │   │   │   ├── Resumo.component.jsx
│   │   │   │   └── Resumo.style.jsx
│   │   │   └── TeamCard/
│   │   │       ├── Index.jsx
│   │   │       └── Style.css
│   │   ├── contexts/
│   │   │   ├── AppContext.js
│   │   │   ├── AppProvider.jsx
│   │   │   └── MathContext/
│   │   │       └── Math.context.jsx
│   │   ├── global.style.jsx
│   │   ├── index.css
│   │   ├── main.jsx
│   │   ├── pages/
│   │   │   ├── PaginaDeCheckout/
│   │   │   │   └── PaginaDeCheckout.jsx
│   │   │   ├── PaginaDeCompra/
│   │   │   │   ├── PaginaDeCompra.jsx
│   │   │   │   └── PaginaDeCompra.style.jsx
│   │   │   ├── PaginaDeErro/
│   │   │   │   └── PaginaDeErro.jsx
│   │   │   ├── PaginaDeProdutos/
│   │   │   │   ├── PaginaDeProduto.styled.jsx
│   │   │   │   └── PaginaDeProdutos.jsx
│   │   │   ├── PaginaDoCarrinhoGlauton/
│   │   │   │   └── PaginaDoCarrinho.jsx
│   │   │   ├── PaginaEasterEgg/
│   │   │   │   ├── Index.jsx
│   │   │   │   └── Style.css
│   │   │   ├── PaginaPrincipal/
│   │   │   │   └── PaginaPrincipal.jsx
│   │   │   ├── PaginaSquad/
│   │   │   │   ├── Index.jsx
│   │   │   │   └── Style.css
│   │   │   └── error404/
│   │   │       ├── Index.jsx
│   │   │       └── Style.css
│   │   ├── server/
│   │   │   └── db.json
│   │   └── services/
│   │       ├── CarrinhoService/
│   │       │   └── CarrinhoService.jsx
│   │       └── ProdutosService/
│   │           └── Produtos.jsx
│   └── vite.config.js
└── README.md

================================================
FILE CONTENTS
================================================

================================================
FILE: Diversão/.eslintrc.cjs
================================================
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}


================================================
FILE: Diversão/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


================================================
FILE: Diversão/README.md
================================================
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh


================================================
FILE: Diversão/index.html
================================================
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>


================================================
FILE: Diversão/package.json
================================================
{
  "name": "divers-o",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.3",
    "@mui/material": "^5.14.3",

    "bootstrap": "^5.3.1",
    "json-server": "^0.17.3",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.10.1",

    "react-router-dom": "^6.15.0",
    "styled-components": "^6.0.7"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "vite": "^4.4.5"
  }
}


================================================
FILE: Diversão/src/App.css
================================================
@import "bootstrap/dist/css/bootstrap.min.css";
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");


================================================
FILE: Diversão/src/App.jsx
================================================
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import "./App.css";
import PaginaPrincipal from "./pages/PaginaPrincipal/PaginaPrincipal";
import PaginaDeCheckout from "./pages/PaginaDeCheckout/PaginaDeCheckout";
import PaginaDeProdutos from "./pages/PaginaDeProdutos/PaginaDeProdutos";
import Provider from "./contexts/AppProvider";
import ItensCarrinho from "./components/ItensCarrinho/ItensCarrinho.component";

import { PaginaSquad } from "./pages/PaginaSquad/Index";
import PaginaDeErro from "./pages/PaginaDeErro/PaginaDeErro";
import PaginaDoCarrinho from "./pages/PaginaDoCarrinhoGlauton/PaginaDoCarrinho";

function App() {
  return (
    <div className="app">
      <Router>
        <Provider>
        <Routes>
          <Route path="/" element={<PaginaPrincipal />} />
          <Route path="/produtos" element={<PaginaDeProdutos />} />
          <Route path="/carrinho" element={<PaginaDoCarrinho />} />
          <Route path="/checkout" element={<PaginaDeCheckout />} />
          <Route path="/squad" element={<PaginaSquad />} />
          <Route path="/*" element={<PaginaDeErro />} />
        </Routes>
        <ItensCarrinho/>
        </Provider>
      </Router>
    </div>
  );
}

export default App;


================================================
FILE: Diversão/src/components/BuscaProduto/BuscaProduto.component.jsx
================================================
/* eslint-disable react/prop-types */

import { StyledBuscaProduto } from "./BuscaProduto.styled"; 
import SearchIcon from '@mui/icons-material/Search'; // Importe o ícone de pesquisa do Material-UI

const BuscaProduto = ({ searchTerm, onSearchChange }) => {
  return (
    <StyledBuscaProduto>
      <input
        type="text"
        placeholder="Busque o produto por nome"
        value={searchTerm}
        onChange={onSearchChange}
      />
      <div className="search-icon">
        <SearchIcon />
      </div>
    </StyledBuscaProduto>
  );
};

export default BuscaProduto;

================================================
FILE: Diversão/src/components/BuscaProduto/BuscaProduto.styled.jsx
================================================
import styled from "styled-components";

export const StyledBuscaProduto = styled.div`
  display: flex;
  align-items: center;
  width: 70%;
  margin: 0 auto;
  position: relative;

  input {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border: none;
    outline: 2px solid #e5e5e5;
    border-radius: 9px;
  }

  .search-icon {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffc500;
    border-radius: 0 9px 9px 0 ;
    padding: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .MuiSvgIcon-root {
    color: white;
  }
`;

================================================
FILE: Diversão/src/components/Button/Button.component.jsx
================================================
import * as Styled from "./Button.style";

export const ButtonComponent = ({ type, text, onClick }) => {
  return (
    <Styled.ButtonWrapper>
      {type === "button" && (
        <Styled.Button type={type} onClick={onClick}>
          {text}
        </Styled.Button>
      )}

      {type === "submit" && (
        <Styled.Button type={type} onClick={onClick}>
          {text}
        </Styled.Button>
      )}
    </Styled.ButtonWrapper>
  );
};



================================================
FILE: Diversão/src/components/Button/Button.style.jsx
================================================
import styled from "styled-components";

export const ButtonWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: green;
  padding: 20px;
`;

export const Button = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
`;



================================================
FILE: Diversão/src/components/CardProduto/CardProduto.component.jsx
================================================
/* eslint-disable react/prop-types */
import { useContext } from "react";
import { StyledCardProduto, AddToCartButton } from "./CardProduto.styled";
import AppContext from "../../contexts/AppContext";

const CardProduto = ({ item }) => {
  const { setCartItems } = useContext(AppContext);

  // Função para adicionar o item ao
  const adicionarAoCarrinho = () => {
    // Construindo o objeto do novo item do carrinho
    const novoItemCarrinho = {
      produto_id: item.id,
      nome: item.nome,
      moeda: item.moeda,
      preço: item.preço,
      imagem: item.imagem,
    };

    // Fazendo uma requisição POST para adicionar o item ao carrinho
    fetch("http://localhost:3000/carrinho", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(novoItemCarrinho),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log("Item adicionado ao carrinho:", data);
        setCartItems(data);
        // Atualizar o estado do carrinho automaticamente aqui

        //** talvez vamos ter que criar um context ou deixar a função no app.jsx que encapsula tudo
      })
      .catch((error) => {
        console.error("Erro ao adicionar item ao carrinho:", error);
      });
  };

  return (
    <StyledCardProduto>
      <div className="corner-badge">#{item.id}</div>
      <div className="container">
        {/* Exibição do nome */}
        <span className="title">{item.nome}</span>
        {/* Exibição da imagem */}
        <div className="image-container">
          <img src={item.imagem} alt={item.nome} loading="lazy" />
        </div>
        {/* Exibição do preço */}
        <div className="price-and-button">
          <span className="price">
            <span className="price-tittle">preço:</span>
            {item.moeda}
            {item.preço}
          </span>
          <AddToCartButton className="bt" onClick={adicionarAoCarrinho}>
            Adicionar ao Carrinho
          </AddToCartButton>
        </div>
      </div>
    </StyledCardProduto>
  );
};

export default CardProduto;


================================================
FILE: Diversão/src/components/CardProduto/CardProduto.styled.jsx
================================================
import styled from "styled-components";

export const StyledCardProduto = styled.div`
  display: flex;
  flex-direction: column;
  width: 24%;
  height:100%;
  background-color: #ffffff;
  border: none;
  margin: 0 2px 15px 2px;
  position: relative;

  .container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: space-between; /* Adicione esta linha */
  }

  .price-and-button {
    display: flex;
    flex-direction: column; 
    align-items: flex-end; 
    gap: 10px;
    width: 100%;
  }

  .image-container {
    min-height: 65%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    flex: 1 1 auto;
  }

  div > img {
    max-height: 90%;
    max-width: 90%;
    object-fit: cover;
  }

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    word-break: break-word;
    padding-left: 25px;
    margin-bottom: 5px;
    font-size: 1rem;
    flex: 0 1 auto;
  }

  .price {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right:5px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: default;
  }

  .price-tittle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right:5px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: #8b8b8b;
  }

  .corner-badge {
    position: absolute;
    background-color: #FFA500;
    color: white;
    padding: 8px 12px;
    border-radius: 0 0 15px 0;
  }


  @media (max-width: 1000px) {
    & {
      width: 31%;
    }

    .image-container {
      min-height: 30%;
      flex-shrink: 1;
    }
  }

  @media (max-width: 620px) {
    width: 170px;
    height: 300px;
  }
`;

export const AddToCartButton = styled.button`
  width: 140px; /* Largura fixa do botão */

  padding: 10px;
  font-size: 1rem;
  font-size: 0.75rem;
  cursor: pointer;
  border: none;
  border-radius: 50px;
  background-color: #ffc500;
  color: black;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #e3b000;
  }
`;

================================================
FILE: Diversão/src/components/Carrinho/Carrinho.component.jsx
================================================
import * as Styled from "./Carrinho.style";
import { useEffect, useState } from "react";
import { ButtonComponent } from "../Button/Button.component";
import { Compra } from "../../services/CarrinhoService/CarrinhoService";
import { Button } from "../Button/Button.style";
import { useNavigate } from "react-router-dom";

export const CarrinhoComponent = () => {
  const [carrinho, setCarrinho] = useState([]);
  const navigate = useNavigate();
  useEffect(() => {
    const fetchCarrinho = async () => {
      try {
        const produtosCarrinho = await Compra.Get();
        setCarrinho(produtosCarrinho);
      } catch (error) {
        console.error("erro ao buscar carrinho: ", error);
      }
    };
    fetchCarrinho();
  }, []);

  const redirectToNewPage = () => {
    navigate("/carrinho-glauton");
  };

  return (
    <>
      <ButtonComponent
        type="button"
        onClick={redirectToNewPage}
        text="Pagina Interessante"
      />
      <Styled.ProductsWrapper>
        <h2>Meu Carrinho</h2>
        {carrinho.length > 0 ? (
          carrinho.map((produto) => {
            return (
              <Styled.ProductWrapper key={produto.id}>
                <img src={produto.imagem} alt="Imagem do Produto" />
                <Styled.ProductFeaturesWrapper>
                  <h2>{produto.nome}</h2>
                  <p>
                    {produto.moeda}
                    {produto.preco}
                  </p>
                </Styled.ProductFeaturesWrapper>
              </Styled.ProductWrapper>
            );
          })
        ) : (
          <p>Nenhum item no seu carrinho</p>
        )}
      </Styled.ProductsWrapper>
    </>
  );
};



================================================
FILE: Diversão/src/components/Carrinho/Carrinho.style.jsx
================================================
import styled from "styled-components";

export const ProductsWrapper = styled.div`
  display: flex;
  text-align: center;
  flex-direction: column;
  background-color: yellow;
`;

export const ProductWrapper = styled.div`
  display: flex;
  background-color: red;
  margin-bottom: 10px;
`;

export const ProductFeaturesWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;



================================================
FILE: Diversão/src/components/CarrinhoGlauton/CarrinhoGlauton.jsx
================================================
import { useNavigate } from "react-router-dom";
import { Compra } from "../../services/CarrinhoService/CarrinhoService";
import * as Styled from "./CarrinhoGlauton.style";
import { useEffect, useState } from "react";
import DeleteProduct from "../DeleteProduct/DeleteProduct";

const Carrinho = () => {
  const [somaPreços, setSomaPreços] = useState();
  const [produtos, setProdutos] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    const pegaProduto = async () => {
      await Compra.Get().then((produto) => {
        setProdutos(produto);
      });
    };
    pegaProduto();
  }, []);
  useEffect(() => {
    const Soma = async () => {
      await Compra.Get().then((produto) => {
        let total = 0;
        produto.forEach(async (element) => {
          let somaTotal = await (total += Number(element.preço));
          if (produto.length > 3) {
            let desconto = somaTotal / 5;
            let preçoDescontado = somaTotal - desconto;
            setSomaPreços(`R$${preçoDescontado}.00`);
          } else {
            setSomaPreços(`R$${Number(somaTotal)}.00`);
          }
        });
      });
    };
    Soma();
  }, []);
  const redirectToProducts = () => {
    navigate("/produtos");
  };
  const redirectToCheckout = () => {
    navigate("/checkout");
  };
  return (
    <Styled.CarrinhoContainer>
      <Styled.CarrinhoContent>
        <Styled.CarrinhoTitulo>Lista de Compra</Styled.CarrinhoTitulo>
        <Styled.ProductOverflow>
          {produtos &&
            produtos.map((produto) => {
              return (
                <Styled.CarrinhoProductContent key={produto.id}>
                  <DeleteProduct produtoId={produto.id} />

                  <Styled.CarrinhoProductImage
                    src={produto.imagem}
                    alt="imagem do item"
                  />
                  <Styled.ProductCollum>
                    <h2>{produto.nome}</h2>
                    <span>
                      Preço:{produto.moeda}
                      {produto.preço}
                    </span>
                  </Styled.ProductCollum>
                </Styled.CarrinhoProductContent>
              );
            })}
        </Styled.ProductOverflow>
        <Styled.ProductBottomRow>
          <div>
            <Styled.ProductButton onClick={redirectToProducts}>
              Comprar mais produtos
            </Styled.ProductButton>
          </div>
          <div>
            <span>Preço atual:</span>
            <h2>{somaPreços}</h2>
          </div>
          <div>
            <Styled.ProductButton onClick={redirectToCheckout}>
              Terminar a Compra
            </Styled.ProductButton>
          </div>
        </Styled.ProductBottomRow>
      </Styled.CarrinhoContent>
    </Styled.CarrinhoContainer>
  );
};

export default Carrinho;


================================================
FILE: Diversão/src/components/CarrinhoGlauton/CarrinhoGlauton.style.jsx
================================================
import styled from "styled-components";

export const CarrinhoContainer = styled.div`
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
`;

export const CarrinhoContent = styled.div`
  background-color: #fff;
  width: 50%;
  margin: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0.2rem 0.2rem 0.2rem #485769;
`;

export const CarrinhoTitulo = styled.h1`
  font-size: 4rem;
  color: #de8705;
  text-align: center;
  margin: 1rem;
`;

export const ProductOverflow = styled.div`
  margin: 1rem;
  overflow-y: scroll;
  height: 60%;
`;

export const CarrinhoProductImage = styled.img`
  width: 18%;
`;
export const CarrinhoProductContent = styled.div`
  display: flex;
  flex-direction: row;
  margin: 1rem;
  justify-content: left;
  gap: 1.5rem;
`;

export const ProductCollum = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1rem;
  color: #000;
`;

export const ProductBottomRow = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
`;

export const ProductButton = styled.button`
  width: 12rem;
  height: 4rem;
  font-size: 1.2rem;
  color: whitesmoke;
  background-color: #de8705;
  color: black;
  border-color: black;
  border-radius: 0.5rem;
  cursor: pointer;
  &:hover {
    background-color: #ffd700;
  }
`;


================================================
FILE: Diversão/src/components/Checkout/CheckoutComponent.jsx
================================================
import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Compra } from "../../services/CarrinhoService/CarrinhoService";
import * as Styled from "./CheckoutComponent.style";

const Button = ({ to, children }) => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(to);
  };

  return (
    <Styled.CheckoutButton onClick={handleClick}>
      {" "}
      {children}
    </Styled.CheckoutButton>
  );
};

export const CheckoutComponent = () => {
  const navigate = useNavigate();
  const [somaPreços, setSomaPreços] = useState();
  const [produtos, setProdutos] = useState([]);

  useEffect(() => {
    const pegaProduto = async () => {
      await Compra.Get().then((produto) => {
        setProdutos(produto);
      });
    };
    pegaProduto();
  }, []);
  useEffect(() => {
    const Soma = async () => {
      await Compra.Get().then((produto) => {
        let total = 0;
        produto.forEach(async (element) => {
          let somaTotal = await (total += Number(element.preço));
          if (produto.length > 3) {
            let desconto = somaTotal / 5;
            let preçoDescontado = somaTotal - desconto;
            setSomaPreços(`R$${preçoDescontado}.00`);
          } else {
            setSomaPreços(`R$${Number(somaTotal)}.00`);
          }
        });
      });
    };
    Soma();
  }, []);

  const [paymentMethod, setPaymentMethod] = useState("creditCard");

  const [isCheckoutDisabled, setIsCheckoutDisabled] = useState(true);
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
  const handlePayment = async (id) => {
    await Compra.Delete(id);

    await navigate("/");
  };

  useEffect(() => {
    setIsCheckoutDisabled(produtos.length === 0);
  }, [produtos]);

  return (
    <Styled.CheckoutContainer>
      <Styled.CheckoutCart>
        {produtos.length === 0 ? (
          <p>O carrinho está vazio.</p>
        ) : (
          <div>
            <Styled.CheckoutTittle>Lista de Compras</Styled.CheckoutTittle>
            <Styled.Table>
              <thead>
                <tr>
                  <th>Imagem</th>
                  <th>Nome do Produto</th>
                  <th>Preço</th>
                </tr>
              </thead>
              <tbody>
                {produtos.map((item, index) => (
                  <tr key={index}>
                    <td>
                      <img src={item.imagem} alt="product_image" />
                    </td>
                    <td>{item.nome}</td>
                    <td>
                      {item.moeda}
                      {item.preço}
                    </td>
                  </tr>
                ))}
                <tr key="total">
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>Valor total </td>
                  <td>{somaPreços}</td>
                </tr>
              </tbody>
            </Styled.Table>
          </div>
        )}
        <Styled.redirectButtons>
          <Button to="/carrinho">Verificar carrinho</Button>
          <Button to="/produtos">Continuar comprando</Button>
        </Styled.redirectButtons>
      </Styled.CheckoutCart>

      <Styled.CheckoutPaymethod>
        <Styled.CheckoutTittle>Método de Pagamento</Styled.CheckoutTittle>

        <Styled.PaymentOptions>
          <div>
            <label>
              <input
                type="radio"
                name="paymentMethod"
                value="creditCard"
                checked={selectedPaymentMethod === "creditCard"}
                onChange={() => setSelectedPaymentMethod("creditCard")}
              />
              Cartão de Crédito
            </label>
          </div>
          <div>
            <label>
              <input
                type="radio"
                name="paymentMethod"
                value="debitCard"
                checked={selectedPaymentMethod === "debitCard"}
                onChange={() => setSelectedPaymentMethod("debitCard")}
              />
              Cartão de Débito
            </label>
          </div>
          <div>
            <label>
              <input
                type="radio"
                name="paymentMethod"
                value="pix"
                checked={selectedPaymentMethod === "pix"}
                onChange={() => setSelectedPaymentMethod("pix")}
              />
              PIX
            </label>
          </div>
          <div>
            <label>
              <input
                type="radio"
                name="paymentMethod"
                value="bankSlip"
                checked={selectedPaymentMethod === "bankSlip"}
                onChange={() => setSelectedPaymentMethod("bankSlip")}
              />
              Boleto Bancário
            </label>
          </div>
        </Styled.PaymentOptions>
        <Styled.CheckoutButton
          onClick={() => {
            produtos.map((produto) => {
              handlePayment(produto.id);
            });
          }}
          disabled={isCheckoutDisabled}
        >
          Finalizar Compra
        </Styled.CheckoutButton>
      </Styled.CheckoutPaymethod>
    </Styled.CheckoutContainer>
  );
};


================================================
FILE: Diversão/src/components/Checkout/CheckoutComponent.style.jsx
================================================
import styled from "styled-components";
import { Link } from "react-router-dom";

export const CheckoutContainer = styled.div`
  display: flex;
  flex-direction: row;
  justify-items: center;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 5rem;
  background-color: #ccc;
  padding: 30px;
`;

export const CheckoutTittle = styled.div`
  display: flex;
  align-items: center;
  font-size: 2rem;
  color: black;
  margin: 1rem;
`;

export const CheckoutCart = styled.div`
  flex: 2;
  width: 66%;
  padding: 20px;
  box-sizing: border-box;
  align-items: center;
  background-color: white;
  border-radius: 10px;
`;

export const CheckoutPaymethod = styled.div`
  flex: 1;
  width: 34%;
  padding: 20px;
  box-sizing: border-box;
  background-color: white;
  border-radius: 10px;
`;

export const Table = styled.table`
  width: 100%;
  text-align: center;

  thead {
    background: #ccc;
    font-weight: bold;
    color: black;
  }

  tbody {
    margin: 1px;
    border-color: black;
  }

  th,
  td {
    padding: 2px 0;
  }

  tbody tr td img {
    max-width: 80%;
    height: auto;
  }

  tbody tr:last-child td {
    font-weight: bold;
  }

  @media screen and (max-width: 480px) {
    thead {
      display: none;
    }

    tbody td {
      display: flex;
      flex-direction: column;
    }
  }

  @media only screen and (min-width: 1200px) {
    tbody tr td:nth-child(1) {
      width: 15%;
    }
    tbody tr td:nth-child(2) {
      width: 50%;
    }
    tbody tr td:nth-child(3) {
      width: 10%;
    }
    tbody tr td:nth-child(4) {
      width: 5%;
    }
    tbody tr td:nth-child(5) {
      width: 15%;
    }
  }
`;

export const CheckoutButton = styled.button`
  width: 250px;
  border-radius: 10px;
  height: 45px;
  background-color: yellow;
  color: black;
  margin: 25px;
  border: none;

  &:hover {
    background-color: #d6d30ec5;
  }
`;

export const redirectButtons = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 5%;
`;

export const PaymentOptions = styled.div`
  display: flex;
  flex-direction: column;

  div {
    margin: 5px 0;
  }

  label {
    display: flex;
    align-items: center;
  }

  input {
    margin-right: 5px;
  }
`;


================================================
FILE: Diversão/src/components/DeleteProduct/DeleteProduct.jsx
================================================
import { Compra } from "../../services/CarrinhoService/CarrinhoService";
import ClearIcon from "@mui/icons-material/Clear";

const DeleteProduct = ({ produtoId }) => {
  const Delete = async (id) => {
    await Compra.Delete(id);
    window.location.reload();
  };
  return (
    <>
      <ClearIcon
        onClick={() => {
          Delete(produtoId);
        }}
      />
    </>
  );
};

export default DeleteProduct;


================================================
FILE: Diversão/src/components/Error/Index.jsx
================================================
import Col from 'react-bootstrap/Col';
import Image from 'react-bootstrap/Image';
import { IoMdAlert } from 'react-icons/io';
import error404 from '../../assets/error404.gif'
import { useNavigate } from 'react-router-dom';
import './Style.css'

export const ErrorComponent = ()=>{
    const navigate = useNavigate()
    const handleEasterEgg = (e)=>{
        e.preventDefault()
        navigate('/easterEggs')
    }
   return (<>
    <Col className="alignItens">
        <h2>Eitcha, parece que não encontramos essa página <IoMdAlert onClick={handleEasterEgg} style={{color: 'red'}}/></h2>            
            <Image className='ImageError' src={error404} rounded />
    </Col>
    </>)
}

================================================
FILE: Diversão/src/components/Error/Style.css
================================================
.alignItens {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    
}

.alignItens h2 {
    margin-top: 40px;
    color: rgb(0, 0, 0);
    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
    
}

.ImageError {    
    width: 40%;
}

================================================
FILE: Diversão/src/components/Footer/Footer.jsx
================================================
import React from "react";
import logo from "../../assets/logo-garcia.png";
import * as Styled from "./Footer.style";
import { Link, useNavigate } from "react-router-dom";

const Footer = () => {
  const navigate = useNavigate();
  const navigateHome = () => {
    navigate("/");
  };
  return (
    <React.Fragment>
      <Styled.FooterContainer>
        <Styled.FooterRow>
          <div className="firstMenu">
            <Styled.FooterImage
              src={logo}
              alt="Logotipo"
              onClick={navigateHome}
            />
          </div>

          <Styled.FooterList>
            <Styled.FooterTittle>Paginas Criadas</Styled.FooterTittle>
            <Styled.FooterLnk to={"/produtos"}>
              Pagina de Produtos
            </Styled.FooterLnk>

            <Styled.FooterLnk to={"/carrinho"}>
              Pagina do Carrinho
            </Styled.FooterLnk>

            <Styled.FooterLnk to={"/checkout"}>
              Pagina de Checkout
            </Styled.FooterLnk>
            <Styled.FooterLnk to={"/squad"}>
              Pagina do Grupo Secreto de Progamadores
            </Styled.FooterLnk>
          </Styled.FooterList>
        </Styled.FooterRow>
        <span className="footerSpan">
          Garcia.Moveis@ Alguns direitos reservados.
        </span>
      </Styled.FooterContainer>
    </React.Fragment>
  );
};

export default Footer;


================================================
FILE: Diversão/src/components/Footer/Footer.style.jsx
================================================
import styled from "styled-components";
import { Link } from "react-router-dom";

export const FooterContainer = styled.footer`
  display: flex;
  flex-direction: column;
  font-family: "Times New Roman";
  width: 100%;
  background-color: #00121c;
  color: #fff;
  gap: 1rem;
`;

export const FooterRow = styled.section`
  display: flex;
  flex-direction: row;
  margin: 1rem;
  justify-content: space-between;
`;

export const FooterImage = styled.img`
  width: 18rem;
  margin: 1rem;
`;

export const FooterTittle = styled.h4`
  font-size: 2rem;
`;

export const FooterList = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 1rem;
`;

export const FooterLnk = styled(Link)`
  text-decoration: none !important;
  list-style-type: none;
  font-size: 1rem;
  color: #f8f8ff;
`;


================================================
FILE: Diversão/src/components/Header/Header.jsx
================================================
import { useContext } from 'react';
import AddShoppingCartIcon from "@mui/icons-material/AddShoppingCart";
import { HeaderWrapper, LogoWrapper, MenuWrapper } from './Header.styled';
import logo from '../../assets/logo-garcia.png';
import  { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Compra } from "../../services/CarrinhoService/CarrinhoService";
import AppContext from "../../contexts/AppContext";


const Header = () => {
  const {cartItems, setIsCartVisible} = useContext(AppContext);

  const [compra, setCompra] = useState();
  const navigate = useNavigate();
  useEffect(() => {
    const quantidadeCompra = async () => {
      await Compra.Get().then((compras) => {
        setCompra(compras.length);
      });
    };
    quantidadeCompra();
  }, [cartItems]);
  const navigateHome = () => {
    navigate("/");
  };
  return (
      <HeaderWrapper>
        <LogoWrapper>
          <Link to={'/'}>
            <img src={logo} alt="Logotipo" onClick={navigateHome} />
          </Link>
        </LogoWrapper>
        <MenuWrapper>
        <li>
            <Link to={'/'}>Inicio</Link>
          </li>
          <li>
            <Link to={'/produtos'}>Produtos</Link>
          </li>
          <li>
            <Link to={"/carrinho"} className="link">
              <div >
                <strong>Meu carrinho</strong>
                </div><div onMouseOver={() => setIsCartVisible(true)} onMouseOut={() => setIsCartVisible(false)}>
                <span>
                {compra === 1 
                ? `${compra} item`
                : compra > 1
                ? `${compra} itens`
                : 'vazio'}
                </span> {/* Exibe a quantidade */}
                <AddShoppingCartIcon fontSize="medium"/>
              </div>

            </Link>
          </li>

        </MenuWrapper>
      </HeaderWrapper>

  );
};

export default Header;


================================================
FILE: Diversão/src/components/Header/Header.styled.jsx
================================================
import styled from 'styled-components';


export const HeaderWrapper = styled.nav`
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #00121c;
    gap: 10px;
    z-index: 1;
`;

export const LogoWrapper = styled.div`
    margin-left:1rem;
    img {
        width: 250px;
    }
`;

export const MenuWrapper = styled.ul`
    display: flex;
    align-items: end;
    gap: 40px;
    padding: 10px;
    list-style-type: none;

    li {
        font-size: 20px;
        font-weight: 500;
    }

    div {
      display:flex;
      justify-content: space-between;
      align-items: center;
      text-align: right;
      margin-right: 10px;
      padding: 2px;

    span {
      font-size: 16px;
      color: #c6c6c6;
    }
    strong {
      font-size: 14px;
      display: block;
      color: #fff;     
    }
  }

    a {
        text-decoration: none;
        color: #fff;
        position: relative;

        &:after {
            content: '';
            display: block;
            height: 2px;
            width: 0;
            background: #FFBB00;
            margin-top: 4px;
            transition: 0.3s;
            position: absolute;
        }

        &:hover::after {
            width: 100%;
        }
    }
`;


================================================
FILE: Diversão/src/components/Header/headerCss.css
================================================
header {
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(to top right, #cd853f 10%, #f4a460);

  width: 100%;
  gap: 10px;
  padding: 10px;
  font-family: Arial;
}

.headerContainer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.headerH1 {
  background: linear-gradient(to bottom right, #ff8c00, #800000 90%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
  margin-top: 20px;
  font-family: serif !important;
  font-weight: 500px;
  font-size: 5rem;
}
.headerList {
  display: flex;
  margin: 1rem;
  top: 20px;
  flex-direction: row;
  width: 25rem;
  gap: 1rem;
}

li {
  list-style-type: none;
}
.link {
  text-decoration: none !important;
  color: #461e00;
  font-size: 2rem;
  cursor: pointer;
}

.link:hover {
  color: #ffd700;
}


================================================
FILE: Diversão/src/components/ItensCarrinho/ItensCarrinho.component.jsx
================================================
import  { useContext } from 'react';
import {
    CartSection,
    CartItems,
    CartItem,
    CartItemImage,
    CartItemContent,
    CartItemTitle,
    CartItemPrice,
    CartResume
} from './ItensCarrinho.style';
import AppContext from '../../contexts/AppContext';

function ItensCarrinho() {
    const { isCartVisible, produtos } = useContext(AppContext);

    const totalPrice = produtos.reduce((acc, item) => {
        const priceValue = parseFloat(item.preço.replace('R$', '').replace(',', '.')); // Converte o preço para número
        return priceValue + acc;
    }, 0);

    const formattedTotalPrice = `R$${totalPrice.toFixed(2).replace('.', ',')}`; // Formata o preço novamente para exibição

    return (
        <CartSection className={`cart ${isCartVisible ? 'cart--active' : ''}`}>
            <CartResume className="cart-resume">Total: {formattedTotalPrice}</CartResume>
            <CartItems>
                {/* Renderize os itens do carrinho */}
                {produtos.length > 0 ? (
                    produtos.map((item) => (
                        <CartItem key={item.id} className="cart-item">
                            <CartItemImage
                                src={item.imagem}
                                alt="imagem do produto"
                                className="cart-item-image"
                            />
                            <CartItemContent className="cart-item-content">
                                <CartItemTitle className="cart-item-title">{item.nome}</CartItemTitle>
                                <CartItemPrice className="cart-item-price">{item.preço}</CartItemPrice>
                            </CartItemContent>
                        </CartItem>
                    ))
                ) : (
                    <div>Carrinho vazio</div>
                )}
            </CartItems>
        </CartSection>
    );
}

export default ItensCarrinho;

================================================
FILE: Diversão/src/components/ItensCarrinho/ItensCarrinho.style.jsx
================================================
import styled from 'styled-components';

export const CartSection = styled.section`
  background-color: #fff;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 350px;
  margin-top: 108px;
  box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2);
  transform: translateX(110%);
  transition: transform 0.3s ease-in-out;
  
  &.cart--active {
    transform: translateX(0);
  }
`;

export const CartItems = styled.div`
  padding: 1rem;
`;

export const CartItem = styled.section`
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;

  &:last-child {
    border-bottom: none;
  }
`;

export const CartItemImage = styled.img`
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 1rem;
`;

export const CartItemContent = styled.div``;

export const CartItemTitle = styled.h3`
font-size: 0.85rem;
font-weight: 500;
color: rgba(0,  0,  0 , 0.5);
margin-bottom: 8px;
`;

export const CartItemPrice = styled.h3`
padding-top:10px;
font-size: 18px;
font-weight: 500;
`;

export const CartResume = styled.div`
text-align:right;
margin-right:15px;
font-size: 1.5rem;
font-weight: 500;
padding: 35px 0 15px;
border-top: 1px solid #ddd;
`;

================================================
FILE: Diversão/src/components/PrincipalBody/PrincipalBody.jsx
================================================
import { useEffect, useState } from "react";
import { ListaDeProdutos } from "../../services/ProdutosService/Produtos";
import ImagemPrincipal from "../../assets/ExemploPaiFilho.jpg";
import * as Styled from "./PrincipalBody.style";
import { useNavigate } from "react-router";

const PrincipalBody = () => {
  const [produtos, setProdutos] = useState([]);

  const navigate = useNavigate();
  useEffect(() => {
    const pegaProduto = async () => {
      await ListaDeProdutos.Get().then((produto) => {
        setProdutos(produto);
      });
    };
    pegaProduto();
  }, []);

  const navigateProducts = () => {
    navigate("/produtos");
  };
  return (
    <Styled.MainContainer>
      <Styled.MainTitle>Feliz Dias dos Pais</Styled.MainTitle>
      <Styled.MainCard>
        <div>
          <Styled.CardImage src={ImagemPrincipal} alt="Pai e Filho" />
        </div>
        <Styled.MainCardContent>
          <Styled.MainCardTitle>
            Estamos com um
            <Styled.MainCardSpecialText>Desconto</Styled.MainCardSpecialText>
          </Styled.MainCardTitle>
          <Styled.MainCardTextRow>
            Para você
            <Styled.MainCardSpecialText>Pai</Styled.MainCardSpecialText>
          </Styled.MainCardTextRow>
          <Styled.MainCardSpecialText>
            20% de Desconto
          </Styled.MainCardSpecialText>
          <Styled.MainCardTextRow>
            em uma compra de
            <Styled.MainCardSpecialText>3</Styled.MainCardSpecialText> ou mais
            moveis
          </Styled.MainCardTextRow>
          <Styled.CardButton onClick={navigateProducts}>
            Venha escolher o seu
          </Styled.CardButton>
        </Styled.MainCardContent>
      </Styled.MainCard>

      <Styled.MainFooter onClick={navigateProducts}>
        <Styled.MainFooterTitle>Veja nossos produtos</Styled.MainFooterTitle>
        <Styled.MainProductRow>
          {produtos &&
            produtos.map((produto) => {
              return (
                <div key={produto.id}>
                  <Styled.ProductImages
                    className="main-product-image"
                    src={produto.imagem}
                    alt="imagem de produto"
                  />
                </div>
              );
            })}
        </Styled.MainProductRow>
      </Styled.MainFooter>
    </Styled.MainContainer>
  );
};

export default PrincipalBody;


================================================
FILE: Diversão/src/components/PrincipalBody/PrincipalBody.style.jsx
================================================
import styled from "styled-components";

export const MainContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  width: 100%;
  gap: 5rem;
`;
export const MainTitle = styled.h1`
  font-size: 8rem;
  color: #de8705;
  margin: 1rem;
`;
export const MainCard = styled.div`
  display: flex;
  flex-direction: row;
  background-color: #00008b;
  margin: 1rem;
  box-shadow: 0.2rem 0.2rem 0.2rem #485769;
`;
export const CardImage = styled.img`
  width: 40rem;
`;

export const MainCardContent = styled.div`
  display: flex;
  flex-direction: column;
  justify-items: center;
  gap: 2rem;
  font-size: 2rem;
  padding: 1rem;
  color: #fff;
`;

export const CardButton = styled.button`
  width: 12rem;
  height: 4rem;
  font-size: 1.2rem;
  color: whitesmoke;
  background-color: #de8705;
  color: black;
  border-color: black;
  border-radius: 0.5rem;
  margin-left: 30rem;
  cursor: pointer;
  &:hover {
    background-color: #ffd700;
  }
`;

export const MainCardTitle = styled.h2`
  display: flex;
  justify-items: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 2.5rem;
`;

export const MainCardSpecialText = styled.p`
  font-size: 4rem;
  color: #ffd700;
`;
export const MainCardTextRow = styled.span`
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
`;
export const MainFooter = styled.div`
  background-color: #ffffff;
  box-shadow: 0.2rem 0.2rem 0.2rem #485769;
  margin-bottom: 4rem;
  cursor: pointer;
`;
export const MainFooterTitle = styled.h3`
  font-size: 4rem;
  color: #de8705;
`;
export const MainProductRow = styled.div`
  display: flex;
  flex-direction: row;
  width: 80rem;
  height: 12rem;
  overflow-x: scroll;
  margin: 1rem;
`;

export const ProductImages = styled.img`
  width: 8rem;
  margin: 1rem;
`;


================================================
FILE: Diversão/src/components/Quantidade/Quantidade.component.jsx
================================================
import { useContext, useState } from 'react';
import { CgMathPlus, CgMathMinus } from 'react-icons/cg';
import * as Styled from './Quantidade.style';

export const QuantidadeComponent = ({produto, onUpdate}) => {

    const [qty, setQty] = useState(produto.qty);

    const handleAddQty = () => {
        const newQty = qty + 1;
        setQty(newQty);
        onUpdate(produto.id, newQty);
    }

    const handleSubQty = () => {
        if(qty > 0) {
            const newQty = qty - 1;
            setQty(newQty);
            onUpdate(produto.id, newQty);
        }
    }

    return(
        <Styled.QtyWrapper>
            <button onClick={handleAddQty}><CgMathPlus/></button>
            <span>{qty}</span>
            <button onClick={handleSubQty}><CgMathMinus/></button>       
        </Styled.QtyWrapper>
    );
}

================================================
FILE: Diversão/src/components/Quantidade/Quantidade.style.jsx
================================================
import styled from 'styled-components';

export const QtyWrapper = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    button {
        background-color: yellow;
        border: none;
        padding: 5px;
        border-radius: 10px;

        &:hover{
            background-color:#d6d30ec5;
        }
    }
`

================================================
FILE: Diversão/src/components/Resumo/Resumo.component.jsx
================================================
import { useNavigate } from "react-router-dom";
import { ButtonComponent } from "../Button/Button.component";
import * as Styled from "./Resumo.style";

export const ResumoComponent = () => {
  const navigate = useNavigate();
  const redirectToProducts = () => {
    navigate("/produtos");
  };
  const redirectToCheckout = () => {
    navigate("/checkout");
  };
  return (
    <Styled.ResumoWrapper>
      <p>aqui vai ser o resumo da sua compra</p>
      <ButtonComponent
        type="button"
        onClick={redirectToProducts}
        text="Continue Comprando"
      />
      <ButtonComponent
        type="button"
        onClick={redirectToCheckout}
        text="Prosseguir para o Checkout"
      />
    </Styled.ResumoWrapper>
  );
};



================================================
FILE: Diversão/src/components/Resumo/Resumo.style.jsx
================================================

import styled from "styled-components";

export const ResumoWrapper = styled.div`
  display: flex;
  flex-direction: column;
  background-color: blue;
  padding: 50px;
`;



================================================
FILE: Diversão/src/components/TeamCard/Index.jsx
================================================
import { useState, useEffect } from 'react';
import Card from 'react-bootstrap/Card';
import './Style.css'

export const TeamCard = ({usuario}) => {
    
    const [descricao, setDescricao] = useState('')
  
useEffect(()=>{
        fetch(`https://api.github.com/users/${usuario}`)
        .then(response => response.json())
        .then(data => {
            setDescricao(data)
        }).catch(error =>{
            console.log('error fetch from git', error)
        })
        
    },[])
    return (
        <div>
            <Card className='styleCard' style={{width: '18rem' }}>
                <Card.Img variant="top" src={descricao?.avatar_url} />
                <Card.Body>
                    <Card.Title>{descricao?.name}</Card.Title>
                    <hr />
                    <Card.Text className='font-italic'>
                        <strong>Bio: </strong>
                       <em>{descricao?.bio} </em>                     
                    </Card.Text>
                    
                </Card.Body>
            </Card>
        </div>
    )
}

export default TeamCard

================================================
FILE: Diversão/src/components/TeamCard/Style.css
================================================
.styleCard {    
    margin-bottom:40px ;      
    margin-left: 10px;
    min-height: 500px;
    padding: 5px;
    box-shadow: 0px 2px 10px 3px rgba(15, 0, 221, 0.5);
}

================================================
FILE: Diversão/src/contexts/AppContext.js
================================================
import { createContext } from 'react';

const AppContext = createContext();

export default AppContext;

================================================
FILE: Diversão/src/contexts/AppProvider.jsx
================================================
import  { useState,useEffect } from 'react';
import propTypes from 'prop-types';
import AppContext from './AppContext';
import { Compra } from "../services/CarrinhoService/CarrinhoService";

function Provider( {children} ) {

    const [produtos, setProdutos] = useState([]);

    const [cartItems, setCartItems] = useState([]);

    const [isCartVisible, setIsCartVisible] = useState(false);



  useEffect(() => {
    fetchCarrinho();
  }, [cartItems]);

  // Função carregar itens do carrinho
  const fetchCarrinho = async () => {
    try {
      const carrinho = await Compra.Get(); //usando o serviço Produtos
      setProdutos(carrinho);
    } catch (error) {
      console.error("Erro ao buscar produtos:", error);
    }
  };


  const value = {
    cartItems,
    setCartItems,
    isCartVisible, 
    setIsCartVisible,
    produtos,
  };

  return ( 
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}

export default Provider;

Provider.propTypes = {
  children: propTypes.any,
}.isRequired;

================================================
FILE: Diversão/src/contexts/MathContext/Math.context.jsx
================================================
import { createContext, useState } from "react";
import PropTypes from 'prop-types'


export const MathContext = createContext(
    {
        totalQty: 0,
        setTotalQty: () => {},
        totalPrc: 0,
        setTotalPrc: () => {},
    }
);

export const MathProvider = ({children}) => {
    const [totalQty, setTotalQty] = useState(0);
    const [totalPrc, setTotalPrc] = useState(0);

    return(
        <MathContext.Provider value={{totalQty, setTotalQty, totalPrc, setTotalPrc}}>
            {children}
        </MathContext.Provider>
    );
}

MathProvider.propTypes = {
    children: PropTypes.node,
}

================================================
FILE: Diversão/src/global.style.jsx
================================================
import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    outline: none;

    box-sizing: border-box;
  }

  html, body, #root {
    background-color:#e3e6e6;
    font-family: Roboto, sans-serif;
  }
`;



================================================
FILE: Diversão/src/index.css
================================================


================================================
FILE: Diversão/src/main.jsx
================================================
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { GlobalStyle } from "./global.style.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <GlobalStyle />
    <App />
  </React.StrictMode>
);


================================================
FILE: Diversão/src/pages/PaginaDeCheckout/PaginaDeCheckout.jsx
================================================
import { CheckoutComponent } from "../../components/Checkout/CheckoutComponent";
import Footer from "../../components/Footer/Footer";
import Header from "../../components/Header/Header";

const PaginaDeCheckout = () => {
  return (
    <>
      <Header />
      <CheckoutComponent />
      <Footer />
    </>
  );
};

export default PaginaDeCheckout;


================================================
FILE: Diversão/src/pages/PaginaDeCompra/PaginaDeCompra.jsx
================================================
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import * as Styled from "./PaginaDeCompra.style";
import { CarrinhoComponent } from "../../components/Carrinho/Carrinho.component";
import { ResumoComponent } from "../../components/Resumo/Resumo.component";

export const PaginaDeCompra = () => {
  return (
    <>
      <Header />
      <Styled.CarrinhoWrapper>
        <CarrinhoComponent />
        <ResumoComponent />
      </Styled.CarrinhoWrapper>
      <Footer />
    </>
  );
};



================================================
FILE: Diversão/src/pages/PaginaDeCompra/PaginaDeCompra.style.jsx
================================================

import styled from "styled-components";

export const CarrinhoWrapper = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
`;



================================================
FILE: Diversão/src/pages/PaginaDeErro/PaginaDeErro.jsx
================================================
import Footer from "../../components/Footer/Footer";
import Header from "../../components/Header/Header";
import { ErrorComponent } from "../../components/error/Index";

const PaginaDeErro = () => {
  return (
    <>
      <Header />
      <ErrorComponent />
      <Footer />
    </>
  );
};

export default PaginaDeErro;


================================================
FILE: Diversão/src/pages/PaginaDeProdutos/PaginaDeProduto.styled.jsx
================================================
import styled from "styled-components";

export const StyledProduto = styled.div`
  margin: 0 auto;
  min-height: calc(100vh - 120px);
  max-width: 1200px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
`;

export const StyledContent = styled.div`
display: flex;
padding-top: 25px;
padding-bottom: 25px;
`;


================================================
FILE: Diversão/src/pages/PaginaDeProdutos/PaginaDeProdutos.jsx
================================================

import { useState, useEffect } from "react";
import CardProduto from "../../components/CardProduto/CardProduto.component";
import { StyledContent, StyledProduto } from "./PaginaDeProduto.styled";
import BuscaProduto from "../../components/BuscaProduto/BuscaProduto.component";
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import { ListaDeProdutos } from "../../services/ProdutosService/Produtos"; 

const PaginaDeProdutos = () => {
  // Estado para armazenar a lista completa de produtos
  const [items, setItems] = useState([""]);

  // Estado para armazenar o termo de pesquisa
  const [searchTerm, setSearchTerm] = useState("");

  // Estado para armazenar a lista de produtos filtrados
  const [filteredItems, setFilteredItems] = useState([]);

  // Carregar a lista completa de produtos quando o componente montar
  useEffect(() => {
    fetchProdutos();
  }, []);

  // Função para buscar e configurar a lista de produtos
  const fetchProdutos = async () => {
    try {
      const produtos = await ListaDeProdutos.Get(); //usando o serviço Produtos
      setItems(produtos);
      setFilteredItems(produtos);
    } catch (error) {
      console.error("Erro ao buscar produtos:", error);
    }
  };

  const handleSearch = (event) => {
    const searchTerm = event.target.value;
    setSearchTerm(searchTerm);

    const filtered = items.filter((item) =>
      item.nome.toLowerCase().includes(searchTerm.toLowerCase())
    );

    setFilteredItems(filtered);
  };
  

  return (
    <>
      <Header />
      <StyledContent>
        <BuscaProduto searchTerm={searchTerm} onSearchChange={handleSearch} /> {/* Componente de busca */}
      </StyledContent>
      <StyledProduto>
        {/* Verifica se existem produtos filtrados para exibir */}
        {filteredItems.length > 0 ? (
          // Mapeia e renderiza os produtos filtrados
          filteredItems.map((item) => {
            return (
              <CardProduto
                item={item}
                key={item.id} // Define a chave como o ID do produto
              />
            );
          })
        ) : (
          // Caso não haja produtos filtrados, exibe a mensagem
          <div>Nenhum produto encontrado com este nome</div>
        )}
      </StyledProduto>
      <Footer /> 
    </>
  );
};

export default PaginaDeProdutos;

================================================
FILE: Diversão/src/pages/PaginaDoCarrinhoGlauton/PaginaDoCarrinho.jsx
================================================
import Carrinho from "../../components/CarrinhoGlauton/CarrinhoGlauton";
import Footer from "../../components/Footer/Footer";
import Header from "../../components/Header/Header";

const PaginaDoCarrinho = () => {
  return (
    <div>
      <Header />
      <Carrinho />
      <Footer />
    </div>
  );
};

export default PaginaDoCarrinho;


================================================
FILE: Diversão/src/pages/PaginaEasterEgg/Index.jsx
================================================
import './Style.css'
import { Col, Row } from 'react-bootstrap'
import Image from 'react-bootstrap/Image';
import Container from 'react-bootstrap/Container';
import TeamCard from '../../components/teamCard/Index'
import eag from '../../assets/yoshi5.gif'
import Header from '../../components/Header/Header';
import Footer from '../../components/Footer/Footer';

export const PaginaSquad = () => {
    return (
        <Container fluid>
            <Header/>
            <Col>
                <Col className='text-center'>
                    <h2 style={{ margin: '40px' }}>Equipe de Desenvolvimento Web - Trindade</h2>
                    <p style={{ fontSize: '20px', color: 'green', marginBottom: '-30px', marginTop: '-40px' }}>Congrats, you find the easter egg! <Image src={eag} /></p>
                    <hr />
                </Col>
                <Row>
                    <Row>
                        <Col className='cardEaster'>
                            <Col id='teamCard'>
                             <TeamCard usuario='portexrp' />
                            </Col>
                            <Col id='aboutUs'>
                            <h3>Soft Skills</h3>
                            <hr />
                            <p>Node js - Models View Controller Middleware's</p>
                            <p>SQL - <span> Script Procedures Triggers CRUD</span></p>
                            <p>React</p>
                            <p></p>
                            </Col>
                            
                        </Col>
                    </Row>
                    <Row>

                        <Col>
                            <Col>
                            </Col>
                            <Col>
                            </Col>
                            <TeamCard usuario='devmariano' />
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Col>
                            </Col>
                            <Col>
                            </Col>
                            <TeamCard usuario='rodrigopieritz' />
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Col>
                            </Col>
                            <Col>
                            </Col>
                            <TeamCard usuario='glautonOsorio' />
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Col>
                            </Col>
                            <Col>
                            </Col>
                            <TeamCard usuario='CesarNahra' />
                        </Col>
                    </Row>
                </Row >
            </Col >
            <Footer/>
        </Container >
    )
}

================================================
FILE: Diversão/src/pages/PaginaEasterEgg/Style.css
================================================
.cardEaster{
display: flex;
}

#teamCard{
    display: block;
    max-width: 280px;
}

#aboutUs {
    display: block;
    background-color: black;
    height: 500px;
    padding: 50px;
    color: white;
}

@media (max-width: 600px)
{
  .cardEaster
   {
    display: block;
    
   }
   #aboutUs {
    margin-top: -50px;
}
}

================================================
FILE: Diversão/src/pages/PaginaPrincipal/PaginaPrincipal.jsx
================================================
import Footer from "../../components/Footer/Footer";
import Header from "../../components/Header/Header";
import PrincipalBody from "../../components/PrincipalBody/PrincipalBody";

const PaginaPrincipal = () => {
  return (
    <div>
      <Header />
      <PrincipalBody />
      <Footer />
    </div>
  );
};

export default PaginaPrincipal;


================================================
FILE: Diversão/src/pages/PaginaSquad/Index.jsx
================================================
import './Style.css'
import { Col, Row } from 'react-bootstrap'
import Image from 'react-bootstrap/Image';
import Container from 'react-bootstrap/Container';
import TeamCard from '../../components/teamCard/Index'
import eag from '../../assets/yoshi5.gif'
import Header from '../../components/Header/Header';
import Footer from '../../components/Footer/Footer';

export const PaginaSquad = () => {
    return (
        <Container fluid>
            <Header />
            <Col>
                <Col className='text-center'>
                    <h2 style={{ margin: '40px' }}>Equipe de Desenvolvimento Web - Trindade</h2>
                  
                    <hr />
                </Col>
                <Row>
                    <Row>
                        <Col className='cardEaster'>
                            <Col id='teamCard'>
                                <TeamCard usuario='portexrp' />
                            </Col>
                            <Col id='aboutUs'>
                                <h3>Skills</h3>
                                <hr />
                                <p>Node js </p>
                                <p>SQL </p>
                                <p>React</p>
                                <p>Javascript</p>
                                <p>PHP</p>
                                <p>Quality Assurance - Tester</p>
                                <p>Linux</p>
                                <p>Rede</p>
                            </Col>
                        </Col>
                    </Row>
                    <Row>
                        <Col className='cardEaster'>
                            <Col id='teamCard'>
                                <TeamCard usuario='devmariano' />
                            </Col>
                            <Col id='aboutUs'>
                                <h3>Skills</h3>
                                <hr />
                                <p>Node js </p>
                                <p>SQL </p>
                                <p>React</p>
                                <p>Javascript</p>
                            </Col>
                        </Col>
                    </Row>
                    <Row>
                        <Col className='cardEaster'>
                            <Col id='teamCard'>
                                <TeamCard usuario='rodrigopieritz' />
                            </Col>
                            <Col id='aboutUs'>
                                <h3>Skills</h3>
                                <hr />
                                <p>Node js </p>
                                <p>SQL </p>
                                <p>React</p>
                                <p>Javascript</p>
                            </Col>
                        </Col>
                    </Row>
                    <Row>
                        <Col className='cardEaster'>
                            <Col id='teamCard'>
                                <TeamCard usuario='glautonOsorio' />
                            </Col>
                            <Col id='aboutUs'>
                                <h3>Skills</h3>
                                <hr />
                                <p>Node js </p>
                                <p>SQL </p>
                                <p>React</p>
                                <p>Javascript</p>
                            </Col>
                        </Col>
                    </Row>
                    <Row>
                        <Col className='cardEaster'>
                            <Col id='teamCard'>
                                <TeamCard usuario='CesarNahra' />
                            </Col>
                            <Col id='aboutUs'>
                                <h3>Skills</h3>
                                <hr />
                                <p>Node js </p>
                                <p>SQL </p>
                                <p>React</p>
                                <p>Javascript</p>
                            </Col>
                        </Col>
                    </Row>
                </Row >
            </Col >
            <Footer />
        </Container >
    )
}

================================================
FILE: Diversão/src/pages/PaginaSquad/Style.css
================================================
.cardEaster{
display: flex;
}

#teamCard{
    display: block;
    max-width: 280px;
}

#aboutUs {
    display: block;
    background-color: black;
    height: 500px;
    padding: 50px;
    color: white;
}

@media (max-width: 600px)
{
  .cardEaster
   {
    display: block;
    
   }
   #aboutUs {
    margin-top: -50px;
}
}

================================================
FILE: Diversão/src/pages/error404/Index.jsx
================================================
import { ErrorComponent } from '../../components/error/Index'
import './Style.css'


export const Error404 = ()=>{
    return (
        <>
        <ErrorComponent/>        
        </>
    )
}

================================================
FILE: Diversão/src/pages/error404/Style.css
================================================


================================================
FILE: Diversão/src/server/db.json
================================================
{
  "produtos": [
    {
      "id": 1,
      "nome": "Cadeira de Criança colorida um",
      "moeda": "R$",
      "preço": "30.00",
      "imagem": "https://images-americanas.b2w.io/produtos/01/00/img/3653861/0/3653861027_1GG.jpg"
    },
    {
      "id": 2,
      "nome": "Console Playstation 5 Edição Digital 825GB ssd Sony",
      "moeda": "R$",
      "preço": "3599.00",
      "imagem": "https://images-americanas.b2w.io/produtos/7291335766/imagens/console-playstation-5-edicao-digital-825gb-ssd-sony/7291335774_1_xlarge.jpg"
    },
    {
      "id": 3,
      "nome": "Guarda Roupa Casal Hera 8 Portas E 4 Gavetas Imbuia",
      "moeda": "R$",
      "preço": "45.00",
      "imagem": "https://images-americanas.b2w.io/produtos/5698332031/imagens/cadeira-banco-plastica-brinquedo-infantil-colorida-escola-un/5698332049_1_xlarge.jpg"
    },
    {
      "id": 4,
      "nome": "Guarda-Roupa Solteiro Malibu 4 pt Imbuia e Off White",
      "moeda": "R$",
      "preço": "496.00",
      "imagem": "https://images-americanas.b2w.io/produtos/61188794/imagens/guarda-roupa-solteiro-malibu-4-pt-imbuia-e-off-white/61188791_1_xlarge.jpg"
    },
    {
      "id": 5,
      "nome": "Sofá 3 Lugares Retrátil e Reclinável Cama inBox Compact 1,80m Velusoft Café",
      "moeda": "R$",
      "preço": "1098.00",
      "imagem": "https://images-americanas.b2w.io/produtos/3072707478/imagens/sofa-3-lugares-retratil-e-reclinavel-cama-inbox-compact-1-80m-velusoft-cafe/3072707486_1_xlarge.jpg"
    },
    {
      "id": 6,
      "nome": "Cadeira de Criança colorida seis",
      "moeda": "R$",
      "preço": "52.00",
      "imagem": "https://images-americanas.b2w.io/produtos/5049198388/imagens/cadeira-infantil-turquesa-jm-moveis/5049198417_1_xlarge.jpg"
    },
    {
      "id": 7,
      "nome": "Sofá de Canto Retrátil 5 lugares Qatar Suede Cinza",
      "moeda": "R$",
      "preço": "979.00",
      "imagem": "https://images-americanas.b2w.io/produtos/01/00/img/49454797/9/4945479786_1SZ.jpg"
    },
    {
      "id": 8,
      "nome": "Console Xbox Series S 500gb Ssd",
      "moeda": "R$",
      "preço": "2299.00",
      "imagem": "https://images-americanas.b2w.io/produtos/01/00/img/2117190/5/2117190565_2SZ.jpg"
    },
    {
      "id": 9,
      "nome": "Cama Box Casal Colchão Molas Flora Bege 138x188x60cm Marrom",
      "moeda": "R$",
      "preço": "879.00",
      "imagem": "https://images-americanas.b2w.io/produtos/5761173408/imagens/cama-box-casal-colchao-molas-flora-bege-138x188x60cm-marrom/5761173408_1_xlarge.jpg"
    },
    {
      "id": 10,
      "nome": "Cama Box Queen Colchão Molas Ensacadas",
      "moeda": "R$",
      "preço": "1983.00",
      "imagem": "https://images-americanas.b2w.io/produtos/4683808649/imagens/cama-box-queen-colchao-molas-ensacadas-com-pillow-top-extra-conforto-158x198x72cm-premium-sleep-bf-colchoes/4683808657_1_xlarge.jpg"
    },
    {
      "id": 11,
      "nome": "Cadeira De Escritorio Com Base Cromada Prizi Essencial - Preta",
      "moeda": "R$",
      "preço": "148.40",
      "imagem": "https://images-americanas.b2w.io/produtos/3646386150/imagens/cadeira-de-escritorio-com-base-cromada-prizi-essencial-preta/3646386168_1_xlarge.jpg"
    },
    {
      "id": 12,
      "nome": "Cama Box Casal Colchão Molas Flora Bege 138x188x60cm Marrom",
      "moeda": "R$",
      "preço": "879.00",
      "imagem": "https://images-americanas.b2w.io/produtos/5761173408/imagens/cama-box-casal-colchao-molas-flora-bege-138x188x60cm-marrom/5761173408_1_xlarge.jpg"
    },
    {
      "id": 13,
      "nome": "Cadeira De Escritório Presidente Best C302 Giratória Tela Mesh",
      "moeda": "R$",
      "preço": "323.91",
      "imagem": "https://images-americanas.b2w.io/produtos/4803475616/imagens/cadeira-de-escritorio-presidente-best-c302-giratoria-tela-mesh/4803475624_1_xlarge.jpg"
    }
  ],
  "carrinho": [
    {
      "produto_id": 4,
      "nome": "Guarda-Roupa Solteiro Malibu 4 pt Imbuia e Off White",
      "moeda": "R$",
      "preço": "496.00",
      "imagem": "https://images-americanas.b2w.io/produtos/61188794/imagens/guarda-roupa-solteiro-malibu-4-pt-imbuia-e-off-white/61188791_1_xlarge.jpg",
      "id": 1
    },
    {
      "produto_id": 2,
      "nome": "Console Playstation 5 Edição Digital 825GB ssd Sony",
      "moeda": "R$",
      "preço": "3599.00",
      "imagem": "https://images-americanas.b2w.io/produtos/7291335766/imagens/console-playstation-5-edicao-digital-825gb-ssd-sony/7291335774_1_xlarge.jpg",
      "id": 2
    },
    {
      "produto_id": 5,
      "nome": "Sofá 3 Lugares Retrátil e Reclinável Cama inBox Compact 1,80m Velusoft Café",
      "moeda": "R$",
      "preço": "1098.00",
      "imagem": "https://images-americanas.b2w.io/produtos/3072707478/imagens/sofa-3-lugares-retratil-e-reclinavel-cama-inbox-compact-1-80m-velusoft-cafe/3072707486_1_xlarge.jpg",
      "id": 3
    }
  ]
}

================================================
FILE: Diversão/src/services/CarrinhoService/CarrinhoService.jsx
================================================
const API_URL = `http://localhost:3000/carrinho`;

const Get = async () => {
  const response = await fetch(API_URL);
  const data = await response.json();
  return data;
};

const Create = async (newData) => {
  await fetch(API_URL, {
    method: "POST",
    body: JSON.stringify({
      produto_id: newData.produto_id,
      nome: newData.nome,
      preço: newData.preço,
      imagem: newData.imagem,
      quantidade: 1,
    }),
    headers: {
      "Content-type": "application/json",
    },
  })
    .then((res) => {
      alert("Cadastrado com sucesso");
    })
    .catch((err) => {
      alert(`Erro ao cadastrar ${err.message}`);
    });
};

const Delete = async (id) => {
  await fetch(`http://localhost:3000/carrinho/${id}`, {
    method: "Delete",
    headers: {
      "Content-type": "application/json",
    },
  });
};
export const Compra = {
  Get,
  Create,
  Delete,
};


================================================
FILE: Diversão/src/services/ProdutosService/Produtos.jsx
================================================
const API_URL = `http://localhost:3000/produtos`;

const Get = async () => {
  const response = await fetch(API_URL);
  const data = await response.json();
  return data;
};

export const ListaDeProdutos = {
  Get,
};


================================================
FILE: Diversão/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})


================================================
FILE: README.md
================================================