Funcion de Carrito

ventaboletos/src/components/vistas/Informacion.jsx

@@ -20,6 +20,7 @@ function Informacion() {
   const [conciertos, setConciertos] = useState([]);
   const [selectedConcierto, setSelectedConcierto] = useState(null);
   const [tipoAsiento, setTipoAsiento] = useState([]);
+  const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
 
   useEffect(() => {
     fetchConciertos();
@@ -34,7 +35,6 @@ function Informacion() {
       console.error(error);
     } else {
       setConciertos(conciertos);
-      console.log(conciertos);
     }
   };
 
@@ -46,7 +46,6 @@ function Informacion() {
       console.error(error);
     } else {
       setTipoAsiento(asientos);
-      console.log(asientos);
     }
   };
 
@@ -55,6 +54,28 @@ function Informacion() {
     setOpen(true);
   };
 
+  const handleAgregarAlCarrito = () => {
+    if (!selectedConcierto || !asientoSeleccionado) {
+      alert("Selecciona un tipo de asiento antes de continuar.");
+      return;
+    }
+
+    // Obtener carrito actual desde localStorage
+    const carritoActual = JSON.parse(localStorage.getItem("carrito")) || [];
+
+    // Agregar el concierto con el tipo de asiento seleccionado
+    const nuevoCarrito = [
+      ...carritoActual,
+      { ...selectedConcierto, asiento: asientoSeleccionado },
+    ];
+
+    // Guardar en localStorage
+    localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
+
+    // Cerrar el modal
+    setOpen(false);
+  };
+
   return (
     <>
       <div className="space-y-4">
@@ -74,6 +95,7 @@ function Informacion() {
           </div>
         ))}
       </div>
+
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent>
           <DialogHeader>
@@ -81,7 +103,7 @@ function Informacion() {
             <p className="text-sm text-gray-600">{selectedConcierto?.fecha}</p>
           </DialogHeader>
           <div className="space-y-4">
-            <Select onValueChange={setTipoAsiento}>
+            <Select onValueChange={setAsientoSeleccionado}>
               <SelectTrigger>
                 <SelectValue placeholder="Selecciona un tipo de asiento" />
               </SelectTrigger>
@@ -98,7 +120,7 @@ function Informacion() {
             <Button variant="outline" onClick={() => setOpen(false)}>
               Cancelar
             </Button>
-            <Button>Aceptar</Button>
+            <Button onClick={handleAgregarAlCarrito}>Aceptar</Button>
           </div>
         </DialogContent>
       </Dialog>

ventaboletos/src/pages/carrito.jsx

@@ -1,7 +1,27 @@
-import React from 'react'
+import { useEffect, useState } from "react";
 
 export default function Carrito() {
+  const [carrito, setCarrito] = useState([]);
+
+  useEffect(() => {
+    const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
+    setCarrito(carritoGuardado);
+  }, []);
+
   return (
-    <div>carrito</div>
-  )
+    <div className="p-4 max-w-3xl mx-auto">
+      <h2 className="text-2xl font-bold mb-4">Carrito de Compras</h2>
+      {carrito.length === 0 ? (
+        <p className="text-gray-600">No hay conciertos en el carrito.</p>
+      ) : (
+        carrito.map((item, index) => (
+          <div key={index} className="border p-4 mb-2 rounded-lg">
+            <p className="text-lg font-semibold">{item.nombre}</p>
+            <p className="text-sm text-gray-600">Fecha: {item.fecha}</p>
+            <p className="text-sm text-gray-600">Asiento: {item.asiento}</p>
+          </div>
+        ))
+      )}
+    </div>
+  );
 }