Agregar Pedidos

This commit is contained in:
xFractu 2024-05-08 11:38:46 -06:00
parent 65c5583acc
commit f1cf6d70bc
6 changed files with 176 additions and 58 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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;
}

View File

@ -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 (
<h1 className="IniSesReserva">Inicia Sesion para poder ver tus reservaciones.</h1>
);
}else{
if(!pedidos){
return(
<h1 className="ReservaNull">No tienes pedidos en este momento.</h1>
);
}else{
return (
<div>
<div key={1}/*{reserva.id_reservacion}*/ className="reservacion">
<div className='container-img-pedido'>
<img src={pastelZarza} alt="" className="imagenPastel" />
</div>
<div className="reservaData">
<h3>{"Pastel Arcoiris"/*reserva.nombre_hotel*/}</h3>
<p>Precio de la reservación: ${500/*reserva.precio*/}</p>
<button className="eliminar-btn" /*onClick={() => mostrarAlertaEliminarRes(reserva.id_reservacion,reserva.nombre_hotel)}*/>
Eliminar Pedido
</button>
</div>
</div>
</div>
);
}
}
};
return (
<>
<body>
@ -99,38 +139,10 @@ function AppPedidos() {
</header>
<main className="main-content">
<section className="container container-features">
</section>
<section className="container top-categories">
</section>
<section className="container top-products">
</section>
<section className="container specials">
<h1 className="heading-1"></h1>
<div className="container-products">
</div>
</section>
<section className="container blogs">
</section>
<main className="main-pedidos">
<div id="contenedor_reservaciones">
{generarPedidos()}
</div>
</main>
@ -201,4 +213,4 @@ function AppPedidos() {
)
}
export default AppPedidos
export default Pedidos

View File

@ -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() {
</header>
<main className = "main-pers-pastel">
<div className="container-img-1" >
{/* Contenido de tu contenedor de imagen */}
<div className="container-img-1">
<img className="imgPastel" src={imagenVisible} alt="Pastel"/>
</div>
<div className="container-info-product">
<div className="container-price">
@ -99,7 +111,7 @@ function Pastel() {
<div className="mb-4">
<p className="pastel-Type">Tipo de Pastel</p>
<div className="botones-pastel">
<button className="boton-1">
<button className="boton-1" onClick={cambiarImagen}>
Vanilla Rainbow Cake
</button>
<button className="boton-2">

View File

@ -200,14 +200,20 @@
.container-img-1 {
background-color: #f7f7f9;
background-image: url('assets/pastel1.jpg');
background-image: url('');
flex: 1;
width: 55%;
height: 100%;
padding-top: 60.4%;
background-size: 100% auto;
}
.imgPastel{
flex: 1;
width: 100%;
height: 100%;
background-size: 200% auto;
}
.container-info-product {
flex: 1;
display: flex;