Star Rating · DiSco

Anatomia

Adicionar disco

Álbum

Kind of Blue

Artista

Miles Davis

Sua avaliação

1

2

3

3.0

1

Wrapper

flex items-center gap-1 · contém as 5 estrelas e o label de valor em linha

2

Estrela individual

w-8 h-8 (32px) · posição relative · half-zone (left 50%) e full-zone (right 50%) capturam toque de meia e estrela cheia

3

Value label

text-[#C8F53C] text-sm font-medium ml-1 · visível apenas quando value > 0 · mostra o decimal (ex: 3.5)

Variantes

Display — Stars

Read-only. Usado no Feed Card e na média da comunidade. 14×14 px, gap 2px.

Componente

<Stars value={record.rating} />

Estrutura

flex gap-0.5
5× svg w-3.5 h-3.5
  fill: i <= Math.round(value)
    ? '#C8F53C' : 'none'
  stroke: '#C8F53C'
  strokeWidth: 2

Contextos

Feed Card — linha de ações
Disco Detalhe — bloco de avaliações

Badge inline

Texto simples com o símbolo ★. Usado em Disco Detalhe (visão de terceiro) e nos cards de grid.

Nota

★ 4.5

★ 4.8

Inline (Disco Detalhe)

text-[#C8F53C] font-bold
"★ {record.rating}"

Badge sobre capa

absolute bottom-1.5 left-1.5
bg-black/70 backdrop-blur-sm
rounded px-1.5 py-0.5
text-[#C8F53C] text-[10px] font-bold

Contextos

Inline → Disco Detalhe (terceiro)
Badge → cards de grid em Listas
       cards de comunidade na Home

Média da comunidade

Número grande + Stars + contagem. Aparece em Disco Detalhe quando há ao menos 1 avaliação de outros usuários.

Avaliações

4.3

12 avaliações

Número

text-[#C8F53C] font-bold text-3xl
leading-none
communityAvg.toFixed(1)

Stars + contagem

Stars (14px, gap-0.5)
Math.round(communityAvg) estrelas cheias
"{total} avaliações"
text-[#888] text-xs

Container

bg-[#1a1a1a] rounded-xl p-4
Aparece quando communityTotal >= 1

Input interativo — StarRating

Clicável. Suporta meia estrela. Animação de bounce ao selecionar. Usado em Adicionar e Disco Detalhe (dono).

Sem nota

3.5 — meia estrela

3.5

5 — bounce ao selecionar

5

Componente

<StarRating value={rating} onChange={fn} />

Tamanho

w-8 h-8 (32px) por estrela
gap-1 (4px)

Estrela vazia

fill: transparent
stroke: '#444'
strokeWidth: 1.5

Estrela cheia

fill: '#C8F53C'
stroke: '#C8F53C'
strokeWidth: 1.5

Meia estrela

fill: url(#half-N)
linearGradient: 50% #C8F53C / 50% transparent
stroke: '#C8F53C'

Bounce

@keyframes star-bounce
0.45s · delay: (star-1) × 60ms
cubic-bezier(0.36, 0.07, 0.19, 0.97)

Label

text-[#C8F53C] text-sm font-medium ml-1
Visível quando value > 0

Do / Don't

Nota pessoal (interativo)

3

Feed (display read-only)

Do Input interativo (32px) para coletar nota. Display read-only (14px) no feed. Cada contexto usa o tamanho certo.

no feed

Don't Não use o input interativo (32px) como display no Feed Card. Ocupa espaço excessivo e dá a falsa impressão de ser editável.

Specs

Variante	Tamanho	Interativo	Contexto
Stars	14px	Não	Feed Card, média comunidade
Badge sobre capa	11px	Não	Grid cards (Listas, Home)
Badge inline ★	14px	Não	Disco Detalhe (terceiro)
StarRating	32px	Sim	Adicionar, Disco Detalhe (dono)