Componentes

Search Bar

Campo de busca contextual. Diferente da busca global ⌘K do DiSco, a Search Bar filtra conteúdo dentro da tela atual — coleção, amigos, Discogs.

Visão geral

Buscar

Pink Floyd

3 resultados

The Wall

Pink Floyd · 1979

Wish You Were Here

Pink Floyd · 1975

Animals

Pink Floyd · 1977

Borda lime no foco · botão Cancelar à direita · resultados filtrados

Anatomia

Buscar

Container

bg-[#1a1a1a] · rounded-[14px] · h-[42px] · border border-[#1a1a1a] → focused: #333

Ícone de busca

16×16px · stroke="#555" · fixo à esquerda · não muda ao focar

Input

flex-1 bg-transparent · placeholder:#555 · text-[#f5f5f5] · font-size:14px

Chips de filtro

Abaixo do campo. Scroll horizontal. Filtra os resultados sem sair da busca.

Estados

Default

Buscar disco, artista...

Campo em repouso. Placeholder indica o escopo da busca.

Focused

Border sobe para #333. Botão "Cancelar" aparece à direita fora do campo.

Digitando

Pink Floyd

Ícone × aparece no campo para limpar o valor sem cancelar.

Sem resultado

xyzxyz

Campo sem correspondência renderiza Empty State abaixo com texto e CTA de adicionar.

Contextos de uso

Aba Buscar

Busca global de discos e artistas no Discogs. Chips filtram por gênero. Resultados mostram capa, título, artista, ano.

Minha Coleção

Filtra localmente os registros já salvos. Busca por título, artista ou gênero sem requisição à API.

Adicionar Disco

Campo de busca no Discogs para encontrar o álbum antes de adicionar. Escopo restrito ao Discogs API.

Buscar Amigos

Busca por username ou nome. Resultados mostram avatar, nome e contagem de discos do usuário.

Do / Don't

Buscar na coleção...

FaçaPlaceholder descreve o escopo ("Buscar na coleção..."). Usuário sabe exatamente o que será filtrado.

Buscar...

EvitePlaceholder genérico ("Buscar...") não informa o escopo. Em telas com múltiplos contextos, ambiguidade é um problema.

Specs

Propriedade	Valor
Altura	`42px`
Border radius	`14px` (rounded-[14px])
Background	`#1a1a1a`
Border default	`1px solid #1a1a1a` (invisível)
Border focused	`1px solid #333`
Transição border	`border-color 0.15s`
Ícone busca	`16×16px stroke="#555"`
Padding horizontal	`px-3` (12px)
Font size	`14px`
Placeholder cor	`#555`
Texto cor	`#f5f5f5`
Botão Cancelar	`font-size:13px font-weight:600 color:#C8F53C` · fora do campo