68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
"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>
|
|
);
|
|
}
|