chore: Update dependencies and add API base URL

.env

@@ -0,0 +1 @@
+VITE_API=http://127.0.0.1:8000

package.json

@@ -10,14 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "leaflet": "^1.9.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "socket.io-client": "^4.7.5",
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
     "react-router": "^6.23.1",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.23.1",
+    "socket.io-client": "^4.7.5",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

src/Components/ContainerNotification.jsx

@@ -1,19 +1,23 @@
 import { useEffect, useState } from "react";
 import { io } from "socket.io-client";
 import Notification from "./Notification";
+import dateFormater from "../utils/dateFormater";
 
-const ContainerNotification = () => {
-  const [notification, setNotification] = useState("");
-  const [date, setDate] = useState(new Date());
+const ContainerNotification = ({flag, setFlag}) => {
+  const [title, setTitle] = useState("Alerta RIMAC");
+  const [description, setDescription] = useState("");
+  const [date, setDate] = useState("");
   const [statusNotification, setStatusNotification] = useState(false);
 
   useEffect(() => {
     const socket = io("http://localhost:3000");
 
     socket.on("notification", (data) => {
       setStatusNotification(true);
-      setNotification(data?.message?.gemini_output);
-      setDate(new Date(data.date));
+      setFlag(!flag);
+      setTitle(data?.evento?.tipo);
+      setDescription(data?.evento?.gemini_output);
+      setDate(dateFormater(data?.evento?.fecha));
       console.log(data);
 
       // Establecer un temporizador para ocultar la notificación después de 3 segundos
@@ -34,9 +38,9 @@ const ContainerNotification = () => {
         statusNotification
           ? "translate-y-0 opacity-100"
           : "-translate-y-full opacity-0"
-      } transition-all duration-500 absolute`}
+      } transition-all duration-500 absolute z-50`}
     >
-      <Notification description={notification} />
+      <Notification description={description} title={title} time={date} />
     </div>
   );
 };

src/Components/Detalles.jsx

@@ -1,27 +1,32 @@
-import Logo from "../assets/logoxd.png";
-import Maps from "../assets/logoxd.png";
 import { NavLink } from "react-router-dom";
 import "leaflet/dist/leaflet.css";
+import { useEffect } from "react";
+import useEventsStore from "../store/eventsData";
 
-import { MapContainer, TileLayer, Marker, Popup, Circle } from "react-leaflet";
-const Detalles = ({ evento }) => {
+
+const Detalles = () => {
+  const {events} = useEventsStore();
+  useEffect(() => {
+    console.log(events, "eventos desde dettales");
+  }
+  ,[events]);
   return (
     <>
       <section className="bg-ri-red h-screen">
         <div className="flex flex-col items-center gap-y-24 py-24"></div>
-        <div className="gap-7 flex flex-col bg-ri-white rounded-t-[1.8rem] px-4 py-10 h-auto">
+        <div className="gap-7 flex flex-col bg-ri-white rounded-t-[1.8rem] px-4 py-10 h-5/6 absolute bottom-0">
           <article className="space-y-3">
             <h1 className="text-ri-blue font-bold text-xl">Evento</h1>
-            <p className="text-ri-text">{evento && evento.description}</p>
+            <p className="text-ri-text">{events[0].tipo}</p>
           </article>
           <article className="space-y-3">
             <h1 className="text-ri-blue font-bold text-xl">Fecha y Hora</h1>
-            <p className="text-ri-text">{evento && evento.date}</p>
+            <p className="text-ri-text">{events[0].fecha}</p>
           </article>
-          <article className="space-y-4">
+          {/*<article className="space-y-4">
             <h1 className="text-ri-blue font-bold text-xl">Recomendaciones</h1>
-            <p className="text-ri-text">{evento && evento.recomendaciones}</p>
-          </article>
+            <p className="text-ri-text">{"por programar"}</p>
+          </article>*/}
 
           {/* <article className="space-y-3">
             <h1 className="text-ri-blue font-bold text-xl">Lugar</h1>
@@ -38,9 +43,11 @@ const Detalles = ({ evento }) => {
               </MapContainer>
             </figure>
           </article>*/}
-
+          <article className="space-y-3">
+            <p className="text-5xl font-bold uppercase mt-9 text-center">Todo va a estar bien</p>
+          </article>
           <NavLink to="/Eventos">
-            <button className="bg-ri-red text-ri-white font-bold py-4 rounded-2xl items-baseline content-end w-[calc(100%-32px)]">
+            <button className="bg-ri-red text-ri-white font-bold py-4 rounded-2xl items-baseline content-end w-[calc(100%-32px)] absolute bottom-4">
               Volver
             </button>
           </NavLink>