paso 03

app/components/KidsBrowser.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import type { Kid } from "@/app/data/kids";
+import KidCard from "@/app/components/KidCard";
+
+/** Compara sin mayúsculas ni acentos: "sofia" encuentra a "Sofía Méndez". */
+function normalize(value: string): string {
+  return value
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+    .toLowerCase();
+}
+
+export default function KidsBrowser({ kids }: { kids: Kid[] }) {
+  const [query, setQuery] = useState("");
+  const filtered = kids.filter((kid) => normalize(kid.name).includes(normalize(query)));
+
+  return (
+    <div>
+      {/* Buscador */}
+      <div className="mb-[22px] flex items-center gap-[11px] rounded-[14px] border border-[#ECE0D0] bg-[#FFFDF9] px-4 py-3">
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#B0A290"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="11" cy="11" r="7" />
+          <path d="m21 21-4.3-4.3" />
+        </svg>
+        <input
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Buscar niño…"
+          className="flex-1 border-none bg-transparent text-[15px] text-[#3F362E] outline-none placeholder:text-[#B6A99B]"
+        />
+      </div>
+
+      {/* Encabezado de sección: sala + contador + divisor */}
+      <div className="mb-[14px] flex items-center gap-3">
+        <span className="text-[12.5px] font-extrabold tracking-[.8px] text-[#3F362E]">SALA SOLES</span>
+        <span className="text-[13px] text-[#A89A8B]">
+          {filtered.length} {filtered.length === 1 ? "niño" : "niños"}
+        </span>
+        <span className="h-px flex-1 bg-[#E7DAC8]" />
+      </div>
+
+      {/* Grilla filtrada o estado vacío */}
+      {filtered.length > 0 ? (
+        <div className="grid grid-cols-2 gap-[14px]">
+          {filtered.map((kid) => (
+            <KidCard key={kid.slug} kid={kid} />
+          ))}
+        </div>
+      ) : (
+        <div className="rounded-[18px] border border-dashed border-[#DBCDBA] bg-[#FFFDF9] px-4 py-10 text-center text-[14.5px] text-[#94887B]">
+          No hay niños que coincidan con la búsqueda.
+        </div>
+      )}
+    </div>
+  );
+}