Add search functionality to Informacion component and update concert filtering logic

ventaboletos/src/components/vistas/Informacion.jsx

@@ -14,21 +14,32 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 function Informacion() {
   const [open, setOpen] = useState(false);
   const [conciertos, setConciertos] = useState([]);
+  const [filteredConciertos, setFilteredConciertos] = useState([]);
   const [selectedConcierto, setSelectedConcierto] = useState(null);
   const [tipoAsiento, setTipoAsiento] = useState([]);
   const [numeroAsiento, setNumeroAsiento] = useState([]);
   const [selectedCategoria, setSelectedCategoria] = useState("");
   const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
 
   useEffect(() => {
     fetchConciertos();
     fetchAsientos();
   }, []);
 
+  useEffect(() => {
+    setFilteredConciertos(
+      conciertos.filter((concierto) =>
+        concierto.nombre.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    );
+  }, [searchTerm, conciertos]);
+
   const fetchConciertos = async () => {
     let { data, error } = await supabaseClient.from("conciertos").select("*");
     if (error) {
@@ -86,7 +97,18 @@ function Informacion() {
   return (
     <>
       <div className="space-y-4">
-        {conciertos.map((concierto) => (
+        <div className="w-full flex items-end">
+          <div className="flex">
+            <Input
+              placeholder="Búsqueda por nombre"
+              className="w-60"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <img src="/search.jpg" alt="search" className="h-7 w-7" />
+          </div>
+        </div>
+        {filteredConciertos.map((concierto) => (
           <div
             key={concierto.id}
             className="flex items-center gap-4 p-4 border rounded-lg"

ventaboletos/src/pages/index.js

@@ -19,13 +19,13 @@ export default function ConcertList() {
       <div className="flex flex-col items-center w-[80%]">
         <Tabs defaultValue="account" className="w-full">
           <div className="w-full flex">
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="info">Información</TabsTrigger>
-            <TabsTrigger value="reportes">Reportes</TabsTrigger>
-          </TabsList>
-          <Link href="/carrito">
-          <img src="/carrito.svg" alt="carrito" className="h-10 w-10"/>
-          </Link>
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="info">Información</TabsTrigger>
+              <TabsTrigger value="reportes">Reportes</TabsTrigger>
+            </TabsList>
+            <Link href="/carrito">
+              <img src="/carrito.svg" alt="carrito" className="h-10 w-10" />
+            </Link>
           </div>
           <TabsContent value="info">
             <Card>
@@ -34,12 +34,6 @@ export default function ConcertList() {
                 <CardDescription></CardDescription>
               </CardHeader>
               <CardContent className="space-y-2">
-                <div className="w-full flex items-end">
-                  <div className="flex">
-                  <Input placeholder="Búsqueda por nombre" className="w-60"></Input>
-                  <img src="/search.jpg" alt="search" className="h-7 w-7"/>
-                  </div>
-                </div>
                 <Informacion />
               </CardContent>
               <CardFooter></CardFooter>