|
|
@@ -59,12 +59,20 @@ export function PredictiveSearch() {
|
|
|
|
anulaba de forma confiable via tailwind-merge dentro de este
|
|
|
|
anulaba de forma confiable via tailwind-merge dentro de este
|
|
|
|
contenedor compuesto (input + boton circular), causando un
|
|
|
|
contenedor compuesto (input + boton circular), causando un
|
|
|
|
segundo ring visible al hacer foco. Mas simple y robusto no
|
|
|
|
segundo ring visible al hacer foco. Mas simple y robusto no
|
|
|
|
heredar clases de foco que hay que pelear despues. */}
|
|
|
|
heredar clases de foco que hay que pelear despues.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Sin outline-none: globals.css define un outline de
|
|
|
|
|
|
|
|
accesibilidad global para foco por teclado
|
|
|
|
|
|
|
|
(input:focus-visible, azul de marca) que le gana en
|
|
|
|
|
|
|
|
especificidad a la utilidad outline-none de Tailwind -- no
|
|
|
|
|
|
|
|
se debe quitar, es intencional. Se le agrega rounded-full
|
|
|
|
|
|
|
|
aqui para que ese outline seguido el contorno del pill en
|
|
|
|
|
|
|
|
vez de dibujarse como rectangulo recto. */}
|
|
|
|
<input
|
|
|
|
<input
|
|
|
|
value={query}
|
|
|
|
value={query}
|
|
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
|
|
placeholder="Busca juguetes, mochilas, personajes…"
|
|
|
|
placeholder="Busca juguetes, mochilas, personajes…"
|
|
|
|
className="h-[48px] w-full border-0 bg-transparent p-0 text-sm text-slate-950 outline-none"
|
|
|
|
className="h-[48px] w-full rounded-full border-0 bg-transparent p-0 text-sm text-slate-950"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
{query && <button type="button" aria-label="Limpiar búsqueda" className="mr-1 shrink-0 rounded-full p-1.5 text-slate-400 hover:bg-slate-100" onClick={() => setQuery("")}><X className="size-4" /></button>}
|
|
|
|
{query && <button type="button" aria-label="Limpiar búsqueda" className="mr-1 shrink-0 rounded-full p-1.5 text-slate-400 hover:bg-slate-100" onClick={() => setQuery("")}><X className="size-4" /></button>}
|
|
|
|
<button type="submit" aria-label="Buscar" className="grid size-10 shrink-0 place-items-center rounded-full bg-ari-marino text-white transition hover:brightness-110">
|
|
|
|
<button type="submit" aria-label="Buscar" className="grid size-10 shrink-0 place-items-center rounded-full bg-ari-marino text-white transition hover:brightness-110">
|
|
|
|