From 952aae482481428bb5523d1660ec16715ff0583f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?DOM=C3=89NICA=20HOPPE?= <dhoppe@uc.cl>
Date: Wed, 9 Oct 2024 23:01:20 -0300
Subject: [PATCH] colores ubicacion y servicios

---
 geomapp/src/components/GoogleMap.jsx | 10 ++++-
 geomapp/src/pages/servicios.jsx      | 57 ++++++++++++++++++----------
 geomapp/src/styles/servicios.css     | 18 +++++++++
 3 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/geomapp/src/components/GoogleMap.jsx b/geomapp/src/components/GoogleMap.jsx
index e9e9c35..50e528a 100644
--- a/geomapp/src/components/GoogleMap.jsx
+++ b/geomapp/src/components/GoogleMap.jsx
@@ -48,6 +48,13 @@ const GoogleMapComponent = ({ onMapLoad, filterType }) => {
     // Añade más lugares aquí...
   ];
 
+    // Definir íconos para cada tipo de lugar
+    const iconos = {
+      tiendas: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
+      alojamientos: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
+      restaurantes: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
+    };
+
   // Filtrar los lugares según el filtro seleccionado
   const lugaresFiltrados = lugares.filter((lugar) => {
     return filterType === '' || lugar.tipo === filterType;
@@ -92,6 +99,7 @@ const GoogleMapComponent = ({ onMapLoad, filterType }) => {
                 position={{ lat: lugar.lat, lng: lugar.lng }}
                 onClick={() => setSelectedPlace(lugar)}  // Al hacer clic, selecciona el lugar
                 title={lugar.nombre}
+                icon={iconos[lugar.tipo] || 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'} // Ícono predeterminado si no coincide el tipo
               />
             ))}
 
@@ -99,7 +107,7 @@ const GoogleMapComponent = ({ onMapLoad, filterType }) => {
             <Marker
               position={userLocation}
               title="Tu ubicación actual"
-              icon="http://maps.google.com/mapfiles/ms/icons/blue-dot.png" // Usar un ícono azul para el usuario
+              icon="http://maps.google.com/mapfiles/ms/icons/red-dot.png" // Usar un ícono azul para el usuario
             />
           </GoogleMap>
         </LoadScript>
diff --git a/geomapp/src/pages/servicios.jsx b/geomapp/src/pages/servicios.jsx
index 9325953..e286e8a 100644
--- a/geomapp/src/pages/servicios.jsx
+++ b/geomapp/src/pages/servicios.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import '../styles/servicios.css';
 import { useAuth0 } from '@auth0/auth0-react';
 import Navbar from '../components/Navbar';
@@ -13,37 +13,56 @@ import { useNavigate } from 'react-router-dom';
 
 const Servicios = () => {
   const navigate = useNavigate();  // Inicializa useNavigate
+  const [selectedService, setSelectedService] = useState(null);  // Estado para el servicio seleccionado
+
+  const handleIconClick = (serviceName) => {
+    setSelectedService(serviceName);  // Actualiza el servicio seleccionado
+  };
 
   const handleClick = () => {
     navigate('/publicar');  // Navega a /publicar
   };
 
+  // Información de cada servicio
+  const serviceInfo = {
+    deportes: 'Este servicio ofrece una variedad de actividades deportivas, incluyendo fútbol, baloncesto, y más.',
+    eventos: 'Organiza y asiste a los mejores eventos locales e internacionales con nuestro servicio.',
+    gastronomia: 'Descubre los mejores lugares para disfrutar de la comida local e internacional.',
+    hospedaje: 'Encuentra alojamientos cómodos y asequibles en tu destino deseado.',
+    servicios: 'Accede a una amplia gama de servicios locales que facilitarán tu vida.',
+    turismo: 'Explora las atracciones turísticas más populares y disfruta de tu viaje al máximo.',
+  };
+
   return (
     <div id="hello-world-container">
-    <Navbar />
-    <div className="content">
+      <Navbar />
+      <div className="content">
         <h1>Servicios</h1>
-        <img src={deportes}></img>
-        <br></br>
-        <img src={eventos}></img>
-        <br></br>
-        <img src={gastronomia}></img>
-        <br></br>
-        <img src={hospedaje}></img>
-        <br></br>
-        <img src={servicios}></img>
-        <br></br>
-        <img src={turismo}></img>
-        <br></br>
-        <br></br>
+        <div className="icon-container">
+          <img src={deportes} alt="Deportes" onClick={() => handleIconClick('deportes')} />
+          <img src={eventos} alt="Eventos" onClick={() => handleIconClick('eventos')} />
+          <img src={gastronomia} alt="Gastronomía" onClick={() => handleIconClick('gastronomia')} />
+          <img src={hospedaje} alt="Hospedaje" onClick={() => handleIconClick('hospedaje')} />
+          <img src={servicios} alt="Servicios" onClick={() => handleIconClick('servicios')} />
+          <img src={turismo} alt="Turismo" onClick={() => handleIconClick('turismo')} />
+        </div>
+        {/* Mostrar la información del servicio seleccionado */}
+        {selectedService && (
+          <div className="service-info">
+            <h2>Información del Servicio</h2>
+            <p>{serviceInfo[selectedService]}</p>
+          </div>
+        )}
+        <br />
         <button className="button" onClick={handleClick}>
           Publica tu servicio aquí
         </button>
+      </div>
+      <Footer />
     </div>
-    <Footer />
-</div>
-
   );
 };
 
 export default Servicios;
+
+
diff --git a/geomapp/src/styles/servicios.css b/geomapp/src/styles/servicios.css
index e69de29..6454379 100644
--- a/geomapp/src/styles/servicios.css
+++ b/geomapp/src/styles/servicios.css
@@ -0,0 +1,18 @@
+/* Estilo para alinear los íconos de servicios horizontalmente */
+.icon-container {
+    display: flex; /* Utiliza flex para alinear horizontalmente */
+    justify-content: center; /* Centra los íconos en la página */
+    gap: 20px; /* Espaciado entre cada ícono */
+    margin-top: 20px;
+  }
+  
+  .icon-container img {
+    width: 80px; /* Ajusta el tamaño de los íconos según sea necesario */
+    cursor: pointer; /* Cambia el cursor cuando se pasa sobre los íconos */
+    transition: transform 0.2s; /* Efecto de transición al pasar el mouse sobre los íconos */
+  }
+  
+  .icon-container img:hover {
+    transform: scale(1.1); /* Efecto de aumento al pasar el mouse */
+  }
+  
\ No newline at end of file