Vite + React

[ { "path": "Diversão/.eslintrc.cjs", "content": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plugin:react/recommended',\n 'plugin:react/jsx-runtime',\n 'plugin:react-hooks/recommended',\n ],\n ignorePatterns: ['dist', '.eslintrc.cjs'],\n parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },\n settings: { react: { version: '18.2' } },\n plugins: ['react-refresh'],\n rules: {\n 'react-refresh/only-export-components': [\n 'warn',\n { allowConstantExport: true },\n ],\n },\n}\n" }, { "path": "Diversão/.gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n" }, { "path": "Diversão/README.md", "content": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@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\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n" }, { "path": "Diversão/index.html", "content": "\n\n \n \n \n \n Vite + React\n \n \n

\n \n \n\n" }, { "path": "Diversão/package.json", "content": "{\n \"name\": \"divers-o\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"lint\": \"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@emotion/react\": \"^11.11.1\",\n \"@emotion/styled\": \"^11.11.0\",\n \"@mui/icons-material\": \"^5.14.3\",\n \"@mui/material\": \"^5.14.3\",\n\n \"bootstrap\": \"^5.3.1\",\n \"json-server\": \"^0.17.3\",\n \"prop-types\": \"^15.8.1\",\n \"react\": \"^18.2.0\",\n \"react-bootstrap\": \"^2.8.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-icons\": \"^4.10.1\",\n\n \"react-router-dom\": \"^6.15.0\",\n \"styled-components\": \"^6.0.7\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^18.2.15\",\n \"@types/react-dom\": \"^18.2.7\",\n \"@vitejs/plugin-react\": \"^4.0.3\",\n \"eslint\": \"^8.45.0\",\n \"eslint-plugin-react\": \"^7.32.2\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.3\",\n \"vite\": \"^4.4.5\"\n }\n}\n" }, { "path": "Diversão/src/App.css", "content": "@import \"bootstrap/dist/css/bootstrap.min.css\";\n@import url(\"https://fonts.googleapis.com/css2?family=Roboto&display=swap\");\n" }, { "path": "Diversão/src/App.jsx", "content": "import { BrowserRouter as Router, Route, Routes } from \"react-router-dom\";\n\nimport \"./App.css\";\nimport PaginaPrincipal from \"./pages/PaginaPrincipal/PaginaPrincipal\";\nimport PaginaDeCheckout from \"./pages/PaginaDeCheckout/PaginaDeCheckout\";\nimport PaginaDeProdutos from \"./pages/PaginaDeProdutos/PaginaDeProdutos\";\nimport Provider from \"./contexts/AppProvider\";\nimport ItensCarrinho from \"./components/ItensCarrinho/ItensCarrinho.component\";\n\nimport { PaginaSquad } from \"./pages/PaginaSquad/Index\";\nimport PaginaDeErro from \"./pages/PaginaDeErro/PaginaDeErro\";\nimport PaginaDoCarrinho from \"./pages/PaginaDoCarrinhoGlauton/PaginaDoCarrinho\";\n\nfunction App() {\n return (\n

\n \n \n \n } />\n } />\n } />\n } />\n } />\n } />\n \n \n \n \n

\n );\n}\n\nexport default App;\n" }, { "path": "Diversão/src/components/BuscaProduto/BuscaProduto.component.jsx", "content": "/* eslint-disable react/prop-types */\n\nimport { StyledBuscaProduto } from \"./BuscaProduto.styled\"; \nimport SearchIcon from '@mui/icons-material/Search'; // Importe o ícone de pesquisa do Material-UI\n\nconst BuscaProduto = ({ searchTerm, onSearchChange }) => {\n return (\n \n \n

\n \n

\n \n );\n};\n\nexport default BuscaProduto;" }, { "path": "Diversão/src/components/BuscaProduto/BuscaProduto.styled.jsx", "content": "import styled from \"styled-components\";\n\nexport const StyledBuscaProduto = styled.div`\n display: flex;\n align-items: center;\n width: 70%;\n margin: 0 auto;\n position: relative;\n\n input {\n width: 100%;\n padding: 14px;\n font-size: 16px;\n border: none;\n outline: 2px solid #e5e5e5;\n border-radius: 9px;\n }\n\n .search-icon {\n position: absolute;\n right: 0px;\n top: 50%;\n transform: translateY(-50%);\n background-color: #ffc500;\n border-radius: 0 9px 9px 0 ;\n padding: 11px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .MuiSvgIcon-root {\n color: white;\n }\n`;" }, { "path": "Diversão/src/components/Button/Button.component.jsx", "content": "import * as Styled from \"./Button.style\";\n\nexport const ButtonComponent = ({ type, text, onClick }) => {\n return (\n \n {type === \"button\" && (\n \n {text}\n \n )}\n\n {type === \"submit\" && (\n \n {text}\n \n )}\n \n );\n};\n\n" }, { "path": "Diversão/src/components/Button/Button.style.jsx", "content": "import styled from \"styled-components\";\n\nexport const ButtonWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: green;\n padding: 20px;\n`;\n\nexport const Button = styled.button`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\n" }, { "path": "Diversão/src/components/CardProduto/CardProduto.component.jsx", "content": "/* eslint-disable react/prop-types */\nimport { useContext } from \"react\";\nimport { StyledCardProduto, AddToCartButton } from \"./CardProduto.styled\";\nimport AppContext from \"../../contexts/AppContext\";\n\nconst CardProduto = ({ item }) => {\n const { setCartItems } = useContext(AppContext);\n\n // Função para adicionar o item ao\n const adicionarAoCarrinho = () => {\n // Construindo o objeto do novo item do carrinho\n const novoItemCarrinho = {\n produto_id: item.id,\n nome: item.nome,\n moeda: item.moeda,\n preço: item.preço,\n imagem: item.imagem,\n };\n\n // Fazendo uma requisição POST para adicionar o item ao carrinho\n fetch(\"http://localhost:3000/carrinho\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(novoItemCarrinho),\n })\n .then((response) => response.json())\n .then((data) => {\n console.log(\"Item adicionado ao carrinho:\", data);\n setCartItems(data);\n // Atualizar o estado do carrinho automaticamente aqui\n\n //** talvez vamos ter que criar um context ou deixar a função no app.jsx que encapsula tudo\n })\n .catch((error) => {\n console.error(\"Erro ao adicionar item ao carrinho:\", error);\n });\n };\n\n return (\n \n

#{item.id}

\n {/* Exibição do nome */}\n {item.nome}\n {/* Exibição da imagem */}\n

\n {/* Exibição do preço */}\n

\n \n preço:\n {item.moeda}\n {item.preço}\n \n \n Adicionar ao Carrinho\n \n

\n \n );\n};\n\nexport default CardProduto;\n" }, { "path": "Diversão/src/components/CardProduto/CardProduto.styled.jsx", "content": "import styled from \"styled-components\";\n\nexport const StyledCardProduto = styled.div`\n display: flex;\n flex-direction: column;\n width: 24%;\n height:100%;\n background-color: #ffffff;\n border: none;\n margin: 0 2px 15px 2px;\n position: relative;\n\n .container {\n display: flex;\n flex-direction: column;\n padding: 20px;\n justify-content: space-between; /* Adicione esta linha */\n }\n\n .price-and-button {\n display: flex;\n flex-direction: column; \n align-items: flex-end; \n gap: 10px;\n width: 100%;\n }\n\n .image-container {\n min-height: 65%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 5px;\n flex: 1 1 auto;\n }\n\n div > img {\n max-height: 90%;\n max-width: 90%;\n object-fit: cover;\n }\n\n .title {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n word-break: break-word;\n padding-left: 25px;\n margin-bottom: 5px;\n font-size: 1rem;\n flex: 0 1 auto;\n }\n\n .price {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding-right:5px;\n font-size: 1.1rem;\n font-weight: 500;\n cursor: default;\n }\n\n .price-tittle {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-right:5px;\n text-align: center;\n font-size: 0.8rem;\n font-weight: 500;\n color: #8b8b8b;\n }\n\n .corner-badge {\n position: absolute;\n background-color: #FFA500;\n color: white;\n padding: 8px 12px;\n border-radius: 0 0 15px 0;\n }\n\n\n @media (max-width: 1000px) {\n & {\n width: 31%;\n }\n\n .image-container {\n min-height: 30%;\n flex-shrink: 1;\n }\n }\n\n @media (max-width: 620px) {\n width: 170px;\n height: 300px;\n }\n`;\n\nexport const AddToCartButton = styled.button`\n width: 140px; /* Largura fixa do botão */\n\n padding: 10px;\n font-size: 1rem;\n font-size: 0.75rem;\n cursor: pointer;\n border: none;\n border-radius: 50px;\n background-color: #ffc500;\n color: black;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: #e3b000;\n }\n`;" }, { "path": "Diversão/src/components/Carrinho/Carrinho.component.jsx", "content": "import * as Styled from \"./Carrinho.style\";\nimport { useEffect, useState } from \"react\";\nimport { ButtonComponent } from \"../Button/Button.component\";\nimport { Compra } from \"../../services/CarrinhoService/CarrinhoService\";\nimport { Button } from \"../Button/Button.style\";\nimport { useNavigate } from \"react-router-dom\";\n\nexport const CarrinhoComponent = () => {\n const [carrinho, setCarrinho] = useState([]);\n const navigate = useNavigate();\n useEffect(() => {\n const fetchCarrinho = async () => {\n try {\n const produtosCarrinho = await Compra.Get();\n setCarrinho(produtosCarrinho);\n } catch (error) {\n console.error(\"erro ao buscar carrinho: \", error);\n }\n };\n fetchCarrinho();\n }, []);\n\n const redirectToNewPage = () => {\n navigate(\"/carrinho-glauton\");\n };\n\n return (\n <>\n \n \n

Meu Carrinho

\n {carrinho.length > 0 ? (\n carrinho.map((produto) => {\n return (\n \n $\"Imagem$ \n \n

{produto.nome}

\n {produto.moeda}\n {produto.preco}\n

\n \n \n );\n })\n ) : (\n

Nenhum item no seu carrinho

\n )}\n \n \n );\n};\n\n" }, { "path": "Diversão/src/components/Carrinho/Carrinho.style.jsx", "content": "import styled from \"styled-components\";\n\nexport const ProductsWrapper = styled.div`\n display: flex;\n text-align: center;\n flex-direction: column;\n background-color: yellow;\n`;\n\nexport const ProductWrapper = styled.div`\n display: flex;\n background-color: red;\n margin-bottom: 10px;\n`;\n\nexport const ProductFeaturesWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n`;\n\n" }, { "path": "Diversão/src/components/CarrinhoGlauton/CarrinhoGlauton.jsx", "content": "import { useNavigate } from \"react-router-dom\";\nimport { Compra } from \"../../services/CarrinhoService/CarrinhoService\";\nimport * as Styled from \"./CarrinhoGlauton.style\";\nimport { useEffect, useState } from \"react\";\nimport DeleteProduct from \"../DeleteProduct/DeleteProduct\";\n\nconst Carrinho = () => {\n const [somaPreços, setSomaPreços] = useState();\n const [produtos, setProdutos] = useState([]);\n const navigate = useNavigate();\n\n useEffect(() => {\n const pegaProduto = async () => {\n await Compra.Get().then((produto) => {\n setProdutos(produto);\n });\n };\n pegaProduto();\n }, []);\n useEffect(() => {\n const Soma = async () => {\n await Compra.Get().then((produto) => {\n let total = 0;\n produto.forEach(async (element) => {\n let somaTotal = await (total += Number(element.preço));\n if (produto.length > 3) {\n let desconto = somaTotal / 5;\n let preçoDescontado = somaTotal - desconto;\n setSomaPreços(`R$${preçoDescontado}.00`);\n } else {\n setSomaPreços(`R$${Number(somaTotal)}.00`);\n }\n });\n });\n };\n Soma();\n }, []);\n const redirectToProducts = () => {\n navigate(\"/produtos\");\n };\n const redirectToCheckout = () => {\n navigate(\"/checkout\");\n };\n return (\n \n \n Lista de Compra\n \n {produtos &&\n produtos.map((produto) => {\n return (\n \n \n\n \n \n

{produto.nome}

\n \n Preço:{produto.moeda}\n {produto.preço}\n \n \n \n );\n })}\n \n \n

\n \n Comprar mais produtos\n \n

\n Preço atual:\n

{somaPreços}

\n \n Terminar a Compra\n \n

\n \n \n \n );\n};\n\nexport default Carrinho;\n" }, { "path": "Diversão/src/components/CarrinhoGlauton/CarrinhoGlauton.style.jsx", "content": "import styled from \"styled-components\";\n\nexport const CarrinhoContainer = styled.div`\n display: flex;\n width: 100%;\n height: 100vh;\n justify-content: center;\n`;\n\nexport const CarrinhoContent = styled.div`\n background-color: #fff;\n width: 50%;\n margin: 2rem;\n border-radius: 0.5rem;\n box-shadow: 0.2rem 0.2rem 0.2rem #485769;\n`;\n\nexport const CarrinhoTitulo = styled.h1`\n font-size: 4rem;\n color: #de8705;\n text-align: center;\n margin: 1rem;\n`;\n\nexport const ProductOverflow = styled.div`\n margin: 1rem;\n overflow-y: scroll;\n height: 60%;\n`;\n\nexport const CarrinhoProductImage = styled.img`\n width: 18%;\n`;\nexport const CarrinhoProductContent = styled.div`\n display: flex;\n flex-direction: row;\n margin: 1rem;\n justify-content: left;\n gap: 1.5rem;\n`;\n\nexport const ProductCollum = styled.div`\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n font-size: 1rem;\n color: #000;\n`;\n\nexport const ProductBottomRow = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: 1rem;\n`;\n\nexport const ProductButton = styled.button`\n width: 12rem;\n height: 4rem;\n font-size: 1.2rem;\n color: whitesmoke;\n background-color: #de8705;\n color: black;\n border-color: black;\n border-radius: 0.5rem;\n cursor: pointer;\n &:hover {\n background-color: #ffd700;\n }\n`;\n" }, { "path": "Diversão/src/components/Checkout/CheckoutComponent.jsx", "content": "import React, { useState, useEffect } from \"react\";\nimport { Link, useNavigate } from \"react-router-dom\";\nimport { Compra } from \"../../services/CarrinhoService/CarrinhoService\";\nimport * as Styled from \"./CheckoutComponent.style\";\n\nconst Button = ({ to, children }) => {\n const navigate = useNavigate();\n\n const handleClick = () => {\n navigate(to);\n };\n\n return (\n \n {\" \"}\n {children}\n \n );\n};\n\nexport const CheckoutComponent = () => {\n const navigate = useNavigate();\n const [somaPreços, setSomaPreços] = useState();\n const [produtos, setProdutos] = useState([]);\n\n useEffect(() => {\n const pegaProduto = async () => {\n await Compra.Get().then((produto) => {\n setProdutos(produto);\n });\n };\n pegaProduto();\n }, []);\n useEffect(() => {\n const Soma = async () => {\n await Compra.Get().then((produto) => {\n let total = 0;\n produto.forEach(async (element) => {\n let somaTotal = await (total += Number(element.preço));\n if (produto.length > 3) {\n let desconto = somaTotal / 5;\n let preçoDescontado = somaTotal - desconto;\n setSomaPreços(`R$${preçoDescontado}.00`);\n } else {\n setSomaPreços(`R$${Number(somaTotal)}.00`);\n }\n });\n });\n };\n Soma();\n }, []);\n\n const [paymentMethod, setPaymentMethod] = useState(\"creditCard\");\n\n const [isCheckoutDisabled, setIsCheckoutDisabled] = useState(true);\n const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(\"\");\n const handlePayment = async (id) => {\n await Compra.Delete(id);\n\n await navigate(\"/\");\n };\n\n useEffect(() => {\n setIsCheckoutDisabled(produtos.length === 0);\n }, [produtos]);\n\n return (\n \n \n {produtos.length === 0 ? (\n

O carrinho está vazio.

\n ) : (\n

\n Lista de Compras\n \n \n \n Imagem\n Nome do Produto\n Preço\n \n \n \n {produtos.map((item, index) => (\n \n \n $\"product_image\"$ \n \n {item.nome}\n \n {item.moeda}\n {item.preço}\n \n \n ))}\n \n \n \n \n Valor total \n {somaPreços}\n \n \n \n

\n )}\n \n \n \n \n \n\n \n Método de Pagamento\n\n \n

\n \n setSelectedPaymentMethod(\"creditCard\")}\n />\n Cartão de Crédito\n \n

\n \n setSelectedPaymentMethod(\"debitCard\")}\n />\n Cartão de Débito\n \n

\n \n setSelectedPaymentMethod(\"pix\")}\n />\n PIX\n \n

\n \n setSelectedPaymentMethod(\"bankSlip\")}\n />\n Boleto Bancário\n \n

\n \n {\n produtos.map((produto) => {\n handlePayment(produto.id);\n });\n }}\n disabled={isCheckoutDisabled}\n >\n Finalizar Compra\n \n \n \n );\n};\n" }, { "path": "Diversão/src/components/Checkout/CheckoutComponent.style.jsx", "content": "import styled from \"styled-components\";\nimport { Link } from \"react-router-dom\";\n\nexport const CheckoutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-items: center;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n gap: 5rem;\n background-color: #ccc;\n padding: 30px;\n`;\n\nexport const CheckoutTittle = styled.div`\n display: flex;\n align-items: center;\n font-size: 2rem;\n color: black;\n margin: 1rem;\n`;\n\nexport const CheckoutCart = styled.div`\n flex: 2;\n width: 66%;\n padding: 20px;\n box-sizing: border-box;\n align-items: center;\n background-color: white;\n border-radius: 10px;\n`;\n\nexport const CheckoutPaymethod = styled.div`\n flex: 1;\n width: 34%;\n padding: 20px;\n box-sizing: border-box;\n background-color: white;\n border-radius: 10px;\n`;\n\nexport const Table = styled.table`\n width: 100%;\n text-align: center;\n\n thead {\n background: #ccc;\n font-weight: bold;\n color: black;\n }\n\n tbody {\n margin: 1px;\n border-color: black;\n }\n\n th,\n td {\n padding: 2px 0;\n }\n\n tbody tr td img {\n max-width: 80%;\n height: auto;\n }\n\n tbody tr:last-child td {\n font-weight: bold;\n }\n\n @media screen and (max-width: 480px) {\n thead {\n display: none;\n }\n\n tbody td {\n display: flex;\n flex-direction: column;\n }\n }\n\n @media only screen and (min-width: 1200px) {\n tbody tr td:nth-child(1) {\n width: 15%;\n }\n tbody tr td:nth-child(2) {\n width: 50%;\n }\n tbody tr td:nth-child(3) {\n width: 10%;\n }\n tbody tr td:nth-child(4) {\n width: 5%;\n }\n tbody tr td:nth-child(5) {\n width: 15%;\n }\n }\n`;\n\nexport const CheckoutButton = styled.button`\n width: 250px;\n border-radius: 10px;\n height: 45px;\n background-color: yellow;\n color: black;\n margin: 25px;\n border: none;\n\n &:hover {\n background-color: #d6d30ec5;\n }\n`;\n\nexport const redirectButtons = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n margin-top: 5%;\n`;\n\nexport const PaymentOptions = styled.div`\n display: flex;\n flex-direction: column;\n\n div {\n margin: 5px 0;\n }\n\n label {\n display: flex;\n align-items: center;\n }\n\n input {\n margin-right: 5px;\n }\n`;\n" }, { "path": "Diversão/src/components/DeleteProduct/DeleteProduct.jsx", "content": "import { Compra } from \"../../services/CarrinhoService/CarrinhoService\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\n\nconst DeleteProduct = ({ produtoId }) => {\n const Delete = async (id) => {\n await Compra.Delete(id);\n window.location.reload();\n };\n return (\n <>\n {\n Delete(produtoId);\n }}\n />\n \n );\n};\n\nexport default DeleteProduct;\n" }, { "path": "Diversão/src/components/Error/Index.jsx", "content": "import Col from 'react-bootstrap/Col';\nimport Image from 'react-bootstrap/Image';\nimport { IoMdAlert } from 'react-icons/io';\nimport error404 from '../../assets/error404.gif'\nimport { useNavigate } from 'react-router-dom';\nimport './Style.css'\n\nexport const ErrorComponent = ()=>{\n const navigate = useNavigate()\n const handleEasterEgg = (e)=>{\n e.preventDefault()\n navigate('/easterEggs')\n }\n return (<>\n \n

Eitcha, parece que não encontramos essa página

\n \n )\n}" }, { "path": "Diversão/src/components/Error/Style.css", "content": ".alignItens {\n text-align: center;\n margin-left: auto;\n margin-right: auto;\n \n}\n\n.alignItens h2 {\n margin-top: 40px;\n color: rgb(0, 0, 0);\n box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);\n \n}\n\n.ImageError { \n width: 40%;\n}" }, { "path": "Diversão/src/components/Footer/Footer.jsx", "content": "import React from \"react\";\nimport logo from \"../../assets/logo-garcia.png\";\nimport * as Styled from \"./Footer.style\";\nimport { Link, useNavigate } from \"react-router-dom\";\n\nconst Footer = () => {\n const navigate = useNavigate();\n const navigateHome = () => {\n navigate(\"/\");\n };\n return (\n \n \n \n

\n \n

\n\n \n Paginas Criadas\n \n Pagina de Produtos\n \n\n \n Pagina do Carrinho\n \n\n \n Pagina de Checkout\n \n \n Pagina do Grupo Secreto de Progamadores\n \n \n \n \n Garcia.Moveis@ Alguns direitos reservados.\n \n \n \n );\n};\n\nexport default Footer;\n" }, { "path": "Diversão/src/components/Footer/Footer.style.jsx", "content": "import styled from \"styled-components\";\nimport { Link } from \"react-router-dom\";\n\nexport const FooterContainer = styled.footer`\n display: flex;\n flex-direction: column;\n font-family: \"Times New Roman\";\n width: 100%;\n background-color: #00121c;\n color: #fff;\n gap: 1rem;\n`;\n\nexport const FooterRow = styled.section`\n display: flex;\n flex-direction: row;\n margin: 1rem;\n justify-content: space-between;\n`;\n\nexport const FooterImage = styled.img`\n width: 18rem;\n margin: 1rem;\n`;\n\nexport const FooterTittle = styled.h4`\n font-size: 2rem;\n`;\n\nexport const FooterList = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: left;\n gap: 1rem;\n`;\n\nexport const FooterLnk = styled(Link)`\n text-decoration: none !important;\n list-style-type: none;\n font-size: 1rem;\n color: #f8f8ff;\n`;\n" }, { "path": "Diversão/src/components/Header/Header.jsx", "content": "import { useContext } from 'react';\nimport AddShoppingCartIcon from \"@mui/icons-material/AddShoppingCart\";\nimport { HeaderWrapper, LogoWrapper, MenuWrapper } from './Header.styled';\nimport logo from '../../assets/logo-garcia.png';\nimport { useEffect, useState } from \"react\";\nimport { Link, useNavigate } from \"react-router-dom\";\nimport { Compra } from \"../../services/CarrinhoService/CarrinhoService\";\nimport AppContext from \"../../contexts/AppContext\";\n\n\nconst Header = () => {\n const {cartItems, setIsCartVisible} = useContext(AppContext);\n\n const [compra, setCompra] = useState();\n const navigate = useNavigate();\n useEffect(() => {\n const quantidadeCompra = async () => {\n await Compra.Get().then((compras) => {\n setCompra(compras.length);\n });\n };\n quantidadeCompra();\n }, [cartItems]);\n const navigateHome = () => {\n navigate(\"/\");\n };\n return (\n \n \n \n $\"Logotipo\"$ \n \n \n \n

\n Inicio\n

\n Produtos\n

\n \n

\n Meu carrinho\n

setIsCartVisible(true)} onMouseOut={() => setIsCartVisible(false)}>\n \n {compra === 1 \n ? `${compra} item`\n : compra > 1\n ? `${compra} itens`\n : 'vazio'}\n {/* Exibe a quantidade */}\n \n

\n\n \n

\n\n \n \n\n );\n};\n\nexport default Header;\n" }, { "path": "Diversão/src/components/Header/Header.styled.jsx", "content": "import styled from 'styled-components';\n\n\nexport const HeaderWrapper = styled.nav`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: 20px;\n background-color: #00121c;\n gap: 10px;\n z-index: 1;\n`;\n\nexport const LogoWrapper = styled.div`\n margin-left:1rem;\n img {\n width: 250px;\n }\n`;\n\nexport const MenuWrapper = styled.ul`\n display: flex;\n align-items: end;\n gap: 40px;\n padding: 10px;\n list-style-type: none;\n\n li {\n font-size: 20px;\n font-weight: 500;\n }\n\n div {\n display:flex;\n justify-content: space-between;\n align-items: center;\n text-align: right;\n margin-right: 10px;\n padding: 2px;\n\n span {\n font-size: 16px;\n color: #c6c6c6;\n }\n strong {\n font-size: 14px;\n display: block;\n color: #fff; \n }\n }\n\n a {\n text-decoration: none;\n color: #fff;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n height: 2px;\n width: 0;\n background: #FFBB00;\n margin-top: 4px;\n transition: 0.3s;\n position: absolute;\n }\n\n &:hover::after {\n width: 100%;\n }\n }\n`;\n" }, { "path": "Diversão/src/components/Header/headerCss.css", "content": "header {\n display: flex;\n flex-direction: column;\n background-image: linear-gradient(to top right, #cd853f 10%, #f4a460);\n\n width: 100%;\n gap: 10px;\n padding: 10px;\n font-family: Arial;\n}\n\n.headerContainer {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n}\n\n.headerH1 {\n background: linear-gradient(to bottom right, #ff8c00, #800000 90%);\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n -webkit-text-stroke-width: 1px;\n -webkit-text-stroke-color: #000;\n margin-top: 20px;\n font-family: serif !important;\n font-weight: 500px;\n font-size: 5rem;\n}\n.headerList {\n display: flex;\n margin: 1rem;\n top: 20px;\n flex-direction: row;\n width: 25rem;\n gap: 1rem;\n}\n\nli {\n list-style-type: none;\n}\n.link {\n text-decoration: none !important;\n color: #461e00;\n font-size: 2rem;\n cursor: pointer;\n}\n\n.link:hover {\n color: #ffd700;\n}\n" }, { "path": "Diversão/src/components/ItensCarrinho/ItensCarrinho.component.jsx", "content": "import { useContext } from 'react';\nimport {\n CartSection,\n CartItems,\n CartItem,\n CartItemImage,\n CartItemContent,\n CartItemTitle,\n CartItemPrice,\n CartResume\n} from './ItensCarrinho.style';\nimport AppContext from '../../contexts/AppContext';\n\nfunction ItensCarrinho() {\n const { isCartVisible, produtos } = useContext(AppContext);\n\n const totalPrice = produtos.reduce((acc, item) => {\n const priceValue = parseFloat(item.preço.replace('R$', '').replace(',', '.')); // Converte o preço para número\n return priceValue + acc;\n }, 0);\n\n const formattedTotalPrice = `R$${totalPrice.toFixed(2).replace('.', ',')}`; // Formata o preço novamente para exibição\n\n return (\n \n Total: {formattedTotalPrice}\n \n {/* Renderize os itens do carrinho */}\n {produtos.length > 0 ? (\n produtos.map((item) => (\n \n \n \n {item.nome}\n {item.preço}\n \n \n ))\n ) : (\n

Carrinho vazio

\n )}\n \n \n );\n}\n\nexport default ItensCarrinho;" }, { "path": "Diversão/src/components/ItensCarrinho/ItensCarrinho.style.jsx", "content": "import styled from 'styled-components';\n\nexport const CartSection = styled.section`\n background-color: #fff;\n position: fixed;\n right: 0;\n top: 0;\n height: 100%;\n width: 350px;\n margin-top: 108px;\n box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2);\n transform: translateX(110%);\n transition: transform 0.3s ease-in-out;\n \n &.cart--active {\n transform: translateX(0);\n }\n`;\n\nexport const CartItems = styled.div`\n padding: 1rem;\n`;\n\nexport const CartItem = styled.section`\n display: flex;\n align-items: center;\n margin-bottom: 1rem;\n border-bottom: 1px solid #ddd;\n padding-bottom: 1rem;\n\n &:last-child {\n border-bottom: none;\n }\n`;\n\nexport const CartItemImage = styled.img`\n width: 60px;\n height: 60px;\n object-fit: cover;\n margin-right: 1rem;\n`;\n\nexport const CartItemContent = styled.div``;\n\nexport const CartItemTitle = styled.h3`\nfont-size: 0.85rem;\nfont-weight: 500;\ncolor: rgba(0, 0, 0 , 0.5);\nmargin-bottom: 8px;\n`;\n\nexport const CartItemPrice = styled.h3`\npadding-top:10px;\nfont-size: 18px;\nfont-weight: 500;\n`;\n\nexport const CartResume = styled.div`\ntext-align:right;\nmargin-right:15px;\nfont-size: 1.5rem;\nfont-weight: 500;\npadding: 35px 0 15px;\nborder-top: 1px solid #ddd;\n`;" }, { "path": "Diversão/src/components/PrincipalBody/PrincipalBody.jsx", "content": "import { useEffect, useState } from \"react\";\nimport { ListaDeProdutos } from \"../../services/ProdutosService/Produtos\";\nimport ImagemPrincipal from \"../../assets/ExemploPaiFilho.jpg\";\nimport * as Styled from \"./PrincipalBody.style\";\nimport { useNavigate } from \"react-router\";\n\nconst PrincipalBody = () => {\n const [produtos, setProdutos] = useState([]);\n\n const navigate = useNavigate();\n useEffect(() => {\n const pegaProduto = async () => {\n await ListaDeProdutos.Get().then((produto) => {\n setProdutos(produto);\n });\n };\n pegaProduto();\n }, []);\n\n const navigateProducts = () => {\n navigate(\"/produtos\");\n };\n return (\n \n Feliz Dias dos Pais\n \n

\n \n

\n \n \n Estamos com um\n Desconto\n \n \n Para você\n Pai\n \n \n 20% de Desconto\n \n \n em uma compra de\n 3 ou mais\n moveis\n \n \n Venha escolher o seu\n \n \n \n\n \n Veja nossos produtos\n \n {produtos &&\n produtos.map((produto) => {\n return (\n

\n \n

\n );\n })}\n \n \n \n );\n};\n\nexport default PrincipalBody;\n" }, { "path": "Diversão/src/components/PrincipalBody/PrincipalBody.style.jsx", "content": "import styled from \"styled-components\";\n\nexport const MainContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-items: center;\n align-items: center;\n width: 100%;\n gap: 5rem;\n`;\nexport const MainTitle = styled.h1`\n font-size: 8rem;\n color: #de8705;\n margin: 1rem;\n`;\nexport const MainCard = styled.div`\n display: flex;\n flex-direction: row;\n background-color: #00008b;\n margin: 1rem;\n box-shadow: 0.2rem 0.2rem 0.2rem #485769;\n`;\nexport const CardImage = styled.img`\n width: 40rem;\n`;\n\nexport const MainCardContent = styled.div`\n display: flex;\n flex-direction: column;\n justify-items: center;\n gap: 2rem;\n font-size: 2rem;\n padding: 1rem;\n color: #fff;\n`;\n\nexport const CardButton = styled.button`\n width: 12rem;\n height: 4rem;\n font-size: 1.2rem;\n color: whitesmoke;\n background-color: #de8705;\n color: black;\n border-color: black;\n border-radius: 0.5rem;\n margin-left: 30rem;\n cursor: pointer;\n &:hover {\n background-color: #ffd700;\n }\n`;\n\nexport const MainCardTitle = styled.h2`\n display: flex;\n justify-items: center;\n align-items: center;\n gap: 0.5rem;\n font-size: 2.5rem;\n`;\n\nexport const MainCardSpecialText = styled.p`\n font-size: 4rem;\n color: #ffd700;\n`;\nexport const MainCardTextRow = styled.span`\n display: flex;\n flex-direction: row;\n justify-items: center;\n align-items: center;\n`;\nexport const MainFooter = styled.div`\n background-color: #ffffff;\n box-shadow: 0.2rem 0.2rem 0.2rem #485769;\n margin-bottom: 4rem;\n cursor: pointer;\n`;\nexport const MainFooterTitle = styled.h3`\n font-size: 4rem;\n color: #de8705;\n`;\nexport const MainProductRow = styled.div`\n display: flex;\n flex-direction: row;\n width: 80rem;\n height: 12rem;\n overflow-x: scroll;\n margin: 1rem;\n`;\n\nexport const ProductImages = styled.img`\n width: 8rem;\n margin: 1rem;\n`;\n" }, { "path": "Diversão/src/components/Quantidade/Quantidade.component.jsx", "content": "import { useContext, useState } from 'react';\nimport { CgMathPlus, CgMathMinus } from 'react-icons/cg';\nimport * as Styled from './Quantidade.style';\n\nexport const QuantidadeComponent = ({produto, onUpdate}) => {\n\n const [qty, setQty] = useState(produto.qty);\n\n const handleAddQty = () => {\n const newQty = qty + 1;\n setQty(newQty);\n onUpdate(produto.id, newQty);\n }\n\n const handleSubQty = () => {\n if(qty > 0) {\n const newQty = qty - 1;\n setQty(newQty);\n onUpdate(produto.id, newQty);\n }\n }\n\n return(\n \n \n {qty}\n \n \n );\n}" }, { "path": "Diversão/src/components/Quantidade/Quantidade.style.jsx", "content": "import styled from 'styled-components';\n\nexport const QtyWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n button {\n background-color: yellow;\n border: none;\n padding: 5px;\n border-radius: 10px;\n\n &:hover{\n background-color:#d6d30ec5;\n }\n }\n`" }, { "path": "Diversão/src/components/Resumo/Resumo.component.jsx", "content": "import { useNavigate } from \"react-router-dom\";\nimport { ButtonComponent } from \"../Button/Button.component\";\nimport * as Styled from \"./Resumo.style\";\n\nexport const ResumoComponent = () => {\n const navigate = useNavigate();\n const redirectToProducts = () => {\n navigate(\"/produtos\");\n };\n const redirectToCheckout = () => {\n navigate(\"/checkout\");\n };\n return (\n \n

aqui vai ser o resumo da sua compra

\n \n \n \n );\n};\n\n" }, { "path": "Diversão/src/components/Resumo/Resumo.style.jsx", "content": "\nimport styled from \"styled-components\";\n\nexport const ResumoWrapper = styled.div`\n display: flex;\n flex-direction: column;\n background-color: blue;\n padding: 50px;\n`;\n\n" }, { "path": "Diversão/src/components/TeamCard/Index.jsx", "content": "import { useState, useEffect } from 'react';\nimport Card from 'react-bootstrap/Card';\nimport './Style.css'\n\nexport const TeamCard = ({usuario}) => {\n \n const [descricao, setDescricao] = useState('')\n \nuseEffect(()=>{\n fetch(`https://api.github.com/users/${usuario}`)\n .then(response => response.json())\n .then(data => {\n setDescricao(data)\n }).catch(error =>{\n console.log('error fetch from git', error)\n })\n \n },[])\n return (\n

\n \n \n \n {descricao?.name}\n

\n \n Bio: \n {descricao?.bio} \n \n \n \n \n

\n )\n}\n\nexport default TeamCard" }, { "path": "Diversão/src/components/TeamCard/Style.css", "content": ".styleCard { \n margin-bottom:40px ; \n margin-left: 10px;\n min-height: 500px;\n padding: 5px;\n box-shadow: 0px 2px 10px 3px rgba(15, 0, 221, 0.5);\n}" }, { "path": "Diversão/src/contexts/AppContext.js", "content": "import { createContext } from 'react';\n\nconst AppContext = createContext();\n\nexport default AppContext;" }, { "path": "Diversão/src/contexts/AppProvider.jsx", "content": "import { useState,useEffect } from 'react';\nimport propTypes from 'prop-types';\nimport AppContext from './AppContext';\nimport { Compra } from \"../services/CarrinhoService/CarrinhoService\";\n\nfunction Provider( {children} ) {\n\n const [produtos, setProdutos] = useState([]);\n\n const [cartItems, setCartItems] = useState([]);\n\n const [isCartVisible, setIsCartVisible] = useState(false);\n\n\n\n useEffect(() => {\n fetchCarrinho();\n }, [cartItems]);\n\n // Função carregar itens do carrinho\n const fetchCarrinho = async () => {\n try {\n const carrinho = await Compra.Get(); //usando o serviço Produtos\n setProdutos(carrinho);\n } catch (error) {\n console.error(\"Erro ao buscar produtos:\", error);\n }\n };\n\n\n const value = {\n cartItems,\n setCartItems,\n isCartVisible, \n setIsCartVisible,\n produtos,\n };\n\n return ( \n \n {children}\n \n );\n}\n\nexport default Provider;\n\nProvider.propTypes = {\n children: propTypes.any,\n}.isRequired;" }, { "path": "Diversão/src/contexts/MathContext/Math.context.jsx", "content": "import { createContext, useState } from \"react\";\nimport PropTypes from 'prop-types'\n\n\nexport const MathContext = createContext(\n {\n totalQty: 0,\n setTotalQty: () => {},\n totalPrc: 0,\n setTotalPrc: () => {},\n }\n);\n\nexport const MathProvider = ({children}) => {\n const [totalQty, setTotalQty] = useState(0);\n const [totalPrc, setTotalPrc] = useState(0);\n\n return(\n \n {children}\n \n );\n}\n\nMathProvider.propTypes = {\n children: PropTypes.node,\n}" }, { "path": "Diversão/src/global.style.jsx", "content": "import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n * {\n margin: 0;\n padding: 0;\n outline: none;\n\n box-sizing: border-box;\n }\n\n html, body, #root {\n background-color:#e3e6e6;\n font-family: Roboto, sans-serif;\n }\n`;\n\n" }, { "path": "Diversão/src/index.css", "content": "" }, { "path": "Diversão/src/main.jsx", "content": "import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App.jsx\";\nimport \"./index.css\";\nimport { GlobalStyle } from \"./global.style.jsx\";\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n \n \n \n \n);\n" }, { "path": "Diversão/src/pages/PaginaDeCheckout/PaginaDeCheckout.jsx", "content": "import { CheckoutComponent } from \"../../components/Checkout/CheckoutComponent\";\nimport Footer from \"../../components/Footer/Footer\";\nimport Header from \"../../components/Header/Header\";\n\nconst PaginaDeCheckout = () => {\n return (\n <>\n

\n \n