diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 46b39d1..2724358 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", - "@mui/material": "^5.15.16", + "@mui/material": "^5.15.17", "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -1108,22 +1108,22 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.16", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz", - "integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==", + "version": "5.15.17", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.17.tgz", + "integrity": "sha512-DVAejDQkjNnIac7MfP8sLzuo7fyrBPxNdXe+6bYqOqg1z2OPTlfFAejSNzWe7UenRMuFu9/AyFXj/X2vN2w6dA==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/material": { - "version": "5.15.16", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz", - "integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==", + "version": "5.15.17", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.17.tgz", + "integrity": "sha512-ru/MLvTkCh0AZXmqwIpqGTOoVBS/sX48zArXq/DvktxXZx4fskiRA2PEc7Rk5ZlFiZhKh4moL4an+l8zZwq49Q==", "dependencies": { "@babel/runtime": "^7.23.9", "@mui/base": "5.0.0-beta.40", - "@mui/core-downloads-tracker": "^5.15.16", + "@mui/core-downloads-tracker": "^5.15.17", "@mui/system": "^5.15.15", "@mui/types": "^7.2.14", "@mui/utils": "^5.15.14", diff --git a/frontend/package.json b/frontend/package.json index 3594c20..4bbbe86 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,7 +12,7 @@ "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", - "@mui/material": "^5.15.16", + "@mui/material": "^5.15.17", "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/frontend/src/Pedidos.css b/frontend/src/Pedidos.css index 1f65be3..47683d8 100644 --- a/frontend/src/Pedidos.css +++ b/frontend/src/Pedidos.css @@ -82,4 +82,92 @@ align-items: center; text-align: left; color:var(--primary-color) +} + +/* Estilos del contenedor principal de reservaciones */ +#contenedor_reservaciones { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + padding-top: 10px; +} + +/* Estilos de cada tarjeta de reservación */ +.reservacion { + display: flex; /* Añadir esta propiedad para usar flexbox */ + width: 700px; + gap: 1.5rem; + height: 215px; + margin: 20px; + padding: 15px; + border: 1px solid #ccc; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + background-color: #fff; +} + +/* Estilos para la imagen */ +.imagenPastel { + width: 100%; + height: 100%; /* Ajustar al 100% del contenedor padre */ + background-repeat: no-repeat; + background-size: 100% auto; + border-radius: 8px; /* Añadir bordes redondeados solo a la izquierda */ +} + +/* Estilos para el texto */ +.reservaData { + width: 50%; + padding: 0 15px; /* Agregar relleno solo a los lados */ +} + +.reservacion h3 { + margin-top: 10px; + font-size: 18px; +} + +.reservacion p { + margin: 8px 0; +} + +/* Estilos del botón Eliminar Reservación */ +.eliminar-btn { + background-color: #8B374A; + color: #fff; + border: none; + padding: 8px 16px; + border-radius: 5px; + cursor: pointer; +} + +.eliminar-btn:hover { + background-color: #ff4646; +} + + +.eliminar-btn:hover { + background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */ + } + + +.IniSesReserva{ + padding-top: 2rem; + padding-bottom: 10px; + border-bottom: 1px solid #e4e4e4; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 24px; + font-weight: 300; +} + +.ReservaNull{ + padding-top: 2rem; + padding-bottom: 10px; + border-bottom: 1px solid #e4e4e4; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 24px; + font-weight: 300; } \ No newline at end of file diff --git a/frontend/src/Pedidos.jsx b/frontend/src/Pedidos.jsx index 3d42922..a35e613 100644 --- a/frontend/src/Pedidos.jsx +++ b/frontend/src/Pedidos.jsx @@ -1,4 +1,6 @@ -import { useState } from 'react' +import { useState, useEffect } from 'react'; + +import './Pedidos.css'; import viteLogo from '/vite.svg' @@ -11,17 +13,10 @@ import { FaRegEye } from "react-icons/fa"; import { CiShare2 } from "react-icons/ci"; import { useNavigate } from "react-router-dom"; -import PastelEditado1 from "./assets/Edicion1.jpg"; -import PastelEditado2 from "./assets/Edicion2.jpg"; -import PastelEditado3 from "./assets/Edicion3.jpg"; -import PastelEditado4 from "./assets/Edicion4.jpg"; -import PastelEditado5 from "./assets/Edicion5.jpg"; -import PastelEditado6 from "./assets/Edicion6.jpg"; -import PastelZanahoria from "./assets/Pastel-Zanahoria.jpg"; -import MejoresPasteles from "./assets/MejoresPasteles.jpg"; -import PastelTematico from "./assets/pastel-tematico.jpg"; +import pastelZarza from "./assets/pastel-zarza.jpg" -function AppPedidos() { + +function Pedidos() { const [count, setCount] = useState(0); const navigate = useNavigate(); @@ -44,6 +39,51 @@ function AppPedidos() { navigate("/"); }; + useEffect(() => { + setNombreUsuario("Mario"); + }, []); + + const [nombreUsuario, setNombreUsuario]=useState(""); + + const [pedidos, setPedidos] = useState([]); + + const generarPedidos = () => { + + if(nombreUsuario==null){ + return ( +

Inicia Sesion para poder ver tus reservaciones.

+ ); + }else{ + + if(!pedidos){ + return( + +

No tienes pedidos en este momento.

+ ); + + + }else{ + return ( +
+
+
+ +
+
+

{"Pastel Arcoiris"/*reserva.nombre_hotel*/}

+

Precio de la reservación: ${500/*reserva.precio*/}

+ +
+
+ +
+ ); + } + } + }; + return ( <> @@ -99,38 +139,10 @@ function AppPedidos() { -
-
- -
- -
- -
- -
- - - - - - -
- - - -
-

- -
- -
-
- -
- -
- +
+
+ {generarPedidos()} +
@@ -201,4 +213,4 @@ function AppPedidos() { ) } - export default AppPedidos \ No newline at end of file + export default Pedidos \ No newline at end of file diff --git a/frontend/src/PersPastel1.jsx b/frontend/src/PersPastel1.jsx index 0930930..d28d22c 100644 --- a/frontend/src/PersPastel1.jsx +++ b/frontend/src/PersPastel1.jsx @@ -9,6 +9,8 @@ import { CiHeart } from "react-icons/ci"; import { FaRegEye } from "react-icons/fa"; import { CiShare2 } from "react-icons/ci"; import { useNavigate } from "react-router-dom"; +import pastelArcoirisFondo from "./assets/pastel-zarza.jpg" +import pastelArcoiris from "./assets/pastel1.jpg" function Pastel() { const navigate = useNavigate(); @@ -23,6 +25,16 @@ function Pastel() { navigate("/"); }; + const [imagenVisible, setImagenVisible] = useState(pastelArcoiris); + + const cambiarImagen = () => { + if (imagenVisible === pastelArcoiris) { + setImagenVisible(pastelArcoirisFondo); + } else { + setImagenVisible(pastelArcoiris); + } + }; + return ( <> @@ -83,8 +95,8 @@ function Pastel() {
-
- {/* Contenido de tu contenedor de imagen */} +
+ Pastel
@@ -99,7 +111,7 @@ function Pastel() {

Tipo de Pastel

-