fix favoritos border

iic2154-uc-cl · Nov 6, 2024 · 6828091 · 6828091
1 parent 38ed405
commit 6828091
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 56 deletions.
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -97,9 +97,12 @@ export default function NavBar() {
         <div className="navbar-links">
           <Link to="/inicio" className="nav-link">Inicio</Link>
           <Link to="/mapa-navegacion" className="nav-link">Mapa</Link>
+          <Link to="/calendario" className="nav-link">Calendario</Link>
           <Link to="/servicios" className="nav-link">Servicios</Link>
           {/* <Link to="/hire-designers" className="nav-link">Hire Designers</Link> */}
           {isAuthenticated && (<Link to="/publicaciones" className="nav-link">Publicaciones</Link>)}
+          {isAuthenticated && (<Link to="/favoritos" className="nav-link">Favoritos</Link>)}
+
           {isAuthenticated && userRoles.includes('administrador') && (<Link to="/notificaciones" className="nav-link">Notificaciones</Link>)}
         </div>
 

diff --git a/src/pages/users/favoritos.jsx b/src/pages/users/favoritos.jsx
@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import '../../styles/users/favoritos.css';
 import { FaHeart } from 'react-icons/fa';
+import { Rating } from '@mui/material';
 import Navbar from '../../components/Navbar'; 
 import Footer from '../../components/Footer';
 
@@ -15,7 +16,7 @@ function Favoritos() {
     {
       id: 1,
       titulo: 'Cancha Ejemplo',
-      puntuacion: '4.5 estrellas',
+      puntuacion: 4.5, // Usa el valor numérico para la puntuación
       precio: '$20.000 CLP',
       subcategoria: 'Tiempo Libre y Deporte',
       ubicacion: 'Calle Fútbol 123, Ciudad',
@@ -25,7 +26,7 @@ function Favoritos() {
     {
       id: 2,
       titulo: 'Hostal Ejemplo',
-      puntuacion: '3 estrellas',
+      puntuacion: 3,
       precio: '$15.000 CLP',
       subcategoria: 'Hostelería',
       ubicacion: 'Av. Hostal 456, Ciudad',
@@ -35,7 +36,7 @@ function Favoritos() {
     {
       id: 3,
       titulo: 'Concierto Ejemplo',
-      puntuacion: '5 estrellas',
+      puntuacion: 5,
       precio: '$10.000 CLP',
       subcategoria: 'Entretención',
       ubicacion: 'Parque Central, Ciudad',
@@ -45,7 +46,7 @@ function Favoritos() {
     {
       id: 4,
       titulo: 'Restaurante Ejemplo',
-      puntuacion: '4 estrellas',
+      puntuacion: 4,
       precio: '$8.000 CLP',
       subcategoria: 'Restaurantes y Comida',
       ubicacion: 'Av. Gastronomía 789, Ciudad',
@@ -61,39 +62,43 @@ function Favoritos() {
   return (
     <div id="total">
       <Navbar />
-    <div id="favoritos-container">
-
-      <header className="favoritos-header">
-        <h1> Mis Favoritos</h1>
-      </header>
-      <div className="favoritos-list">
-        {favoritos.map((favorito) => (
-          <div className="favoritos-card" key={favorito.id}>
-            <img src={favorito.imagen} alt={favorito.titulo} className="favoritos-img" />
-
-
-            <div className="favoritos-info-1">
-            <div className="favoritos-heart" onClick={() => eliminarFavorito(favorito.id)}>
-                <FaHeart />
-              </div>  
-            <h2 className='titulo'> {favorito.titulo}</h2>
-
-            <div className="favoritos-info">
-              <div className="puntuacion">{favorito.puntuacion}</div>
-              <div className="ubicacion">{favorito.ubicacion}</div>
-              <div className="favoritos-info-row">  
-                <div className="precio">{favorito.precio}</div>
-                <div className="subcategoria">{favorito.subcategoria}</div>
+      <div id="favoritos-container">
+        <header className="favoritos-header">
+          <h1> Mis Favoritos</h1>
+        </header>
+        <div className="favoritos-list">
+          {favoritos.map((favorito) => (
+            <div className="favoritos-card" key={favorito.id}>
+              <img src={favorito.imagen} alt={favorito.titulo} className="favoritos-img" />
+
+              <div className="favoritos-info-1">
+                <div className="favoritos-heart" onClick={() => eliminarFavorito(favorito.id)}>
+                  <FaHeart />
+                </div>  
+                <h2 className='titulo'>{favorito.titulo}</h2>
+
+                <div className="favoritos-info">
+                  <div className="puntuacion">
+                    <Rating
+                      name={`puntuacion-${favorito.id}`}
+                      value={favorito.puntuacion}
+                      precision={0.5}
+                      readOnly
+                    />
+                  </div>
+                  <div className="ubicacion">{favorito.ubicacion}</div>
+                  <div className="favoritos-info-row">  
+                    <div className="precio">{favorito.precio}</div>
+                    <div className="subcategoria">{favorito.subcategoria}</div>
+                  </div>
+                </div>
+                <p className="descripcion">{favorito.descripcion}</p>
               </div>
             </div>
-            <p className="descripcion">{favorito.descripcion}</p>
-          </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
-
-    </div>
-    <Footer />
+      <Footer />
     </div>
   );
 }

diff --git a/src/pages/users/zhospedaje.jsx b/src/pages/users/zhospedaje.jsx
@@ -197,7 +197,7 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) {
                     label="Nombre de Contacto"
                     multiline
                     value={formData.nombreContacto}
-                    onChange={(e) => handleInputChange('nombreContacto', e.target.value)}
+                    onChange={(e) => onInputChange('nombreContacto', e.target.value)}
                     margin="normal"
                     error={Boolean(errors.nombreContacto)}
                     helperText={errors.nombreContacto}

diff --git a/src/styles/users/favoritos.css b/src/styles/users/favoritos.css
@@ -23,15 +23,17 @@ html, body {
 }
 
 .favoritos-card {
-  display: flex; 
-  align-items: flex-start; 
+  display: flex;
+  align-items: flex-start;
   padding: 15px;
   border: none;
   border-radius: 10px;
   background: white;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s, box-shadow 0.3s;
-  height: 280px; 
+  height: 250px;
+  overflow-y: auto;
+  width: 100%;
   flex-direction: row;
 }
 
@@ -79,41 +81,42 @@ html, body {
   flex-direction: column;
   flex-grow: 1;
   gap: 8px;
+  max-width: 100%;
 }
 
 .favoritos-info-details {
   display: flex;
-  flex-direction: column; /* Cambia a columna para la información adicional */
+  flex-direction: column;
   gap: 8px;
+  max-width: 100%;
 }
 
 .favoritos-info-row {
   display: flex;
   align-items: center;
-  gap: 10px; 
+  flex-wrap: wrap;
+  gap: 10px;
+  max-width: 100%;
 }
 
-.puntuacion, .precio, .subcategoria, .ubicacion {
-  display: inline-flex;
+.puntuacion {
+  display: flex;
+  align-items: center;
+  gap: 5px; /* Espacio entre las estrellas y el texto */
+  padding: 5px;
+  font-size: 1em;
+  color: yellow !important;
+}
+
+.precio, .subcategoria, .ubicacion {
+  background-color: #fc7b03;
+  color: #ffffff;
   padding: 5px 10px;
   border-radius: 5px;
-  color: rgb(255, 255, 255);
   font-size: 0.8em;
-  width: fit-content;
-  max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex-shrink: 0;
-}
-
-.puntuacion {
-  background-color: #fc7b03;
-}
-
-.precio, .subcategoria, .ubicacion {
-  background-color: #808080;
-  color: rgb(255, 255, 255);
 }
 
 .descripcion {
@@ -126,4 +129,4 @@ html, body {
 
 .footer {
   margin-top: auto; /* Esto empuja el footer al fondo del contenedor */
-}
+}