fix(search): mover ícone de busca para fora do input e estilizar limpeza

This commit is contained in:
Jonas Francisco 2025-11-05 22:23:41 -03:00
parent a857e25d2f
commit 3022cbfc4b
2 changed files with 1521 additions and 16 deletions

File diff suppressed because it is too large Load Diff

View File

@ -385,23 +385,43 @@ export function EventManager({
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" /> <div className="flex items-center">
<Input {/* Lupa minimalista à esquerda (somente ícone) */}
placeholder="Buscar eventos..." <button
value={searchQuery} type="button"
onChange={(e) => setSearchQuery(e.target.value)} aria-label="Buscar"
className="pl-9" className="flex items-center justify-center h-10 w-10 p-0 text-muted-foreground bg-transparent border-0"
/> onClick={() => {
{searchQuery && ( const el = document.querySelector<HTMLInputElement>('input[placeholder="Buscar eventos..."]')
<Button el?.focus()
variant="ghost" }}
size="icon"
className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2"
onClick={() => setSearchQuery("")}
> >
<X className="h-4 w-4" /> <Search className="h-5 w-5" />
</Button> </button>
)}
{/* Input central com altura consistente e foco visível */}
<Input
placeholder="Buscar eventos..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className={cn(
"flex-1 h-10 px-3 border border-border focus:ring-2 focus:ring-primary/20 outline-none",
searchQuery ? "rounded-l-md rounded-r-none" : "rounded-md"
)}
/>
{/* Botão limpar discreto à direita (aparece somente com query) */}
{searchQuery ? (
<button
type="button"
aria-label="Limpar busca"
className="flex items-center justify-center h-10 w-10 p-0 text-muted-foreground bg-transparent border-0"
onClick={() => setSearchQuery("")}
>
<X className="h-5 w-5" />
</button>
) : null}
</div>
</div> </div>
{/* Mobile: Horizontal scroll with full-length buttons */} {/* Mobile: Horizontal scroll with full-length buttons */}