Merge fix/adr0008-buscador-ring-input-propio into main
This commit is contained in:
commit
6df24abcb9
1 file changed
+12
-2
@@ -5,7 +5,6 @@ import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Search, X } from "lucide-react";
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type { Product } from "@/lib/headless/types";
|
||||
|
||||
export function PredictiveSearch() {
|
||||
@@ -55,7 +54,18 @@ export function PredictiveSearch() {
|
||||
return (
|
||||
<form onSubmit={submit} className="relative w-full">
|
||||
<div className="flex items-center rounded-full border-2 border-slate-200 bg-white pl-5 pr-1.5 shadow-sm transition focus-within:border-ari-marino focus-within:ring-4 focus-within:ring-ari-coral-claro/30">
|
||||
<Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Busca juguetes, mochilas, personajes…" className="h-[48px] border-0 bg-transparent p-0 shadow-none focus:border-0 focus:ring-0" />
|
||||
{/* input propio (no el <Input> compartido) -- ese componente trae su
|
||||
propio focus:ring-4 focus:ring-cyan-300/30 hardcodeado que no se
|
||||
anulaba de forma confiable via tailwind-merge dentro de este
|
||||
contenedor compuesto (input + boton circular), causando un
|
||||
segundo ring visible al hacer foco. Mas simple y robusto no
|
||||
heredar clases de foco que hay que pelear despues. */}
|
||||
<input
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Busca juguetes, mochilas, personajes…"
|
||||
className="h-[48px] w-full border-0 bg-transparent p-0 text-sm text-slate-950 outline-none"
|
||||
/>
|
||||
{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">
|
||||
<Search className="size-4.5" />
|
||||
|
||||
Reference in new issue
Block a user