Estado vazio

Um espaço em branco lê-se como um bug. Um estado vazio diz qual é o espaço vazio, porquê, e o que fazer a seguir — e é o caso mais facilmente esquecido, porque durante o desenvolvimento há sempre dados.

Estado vazio básico

Ainda não há artigos

Põe um ficheiro Markdown em src/posts e ele aparece aqui.

empty({
  title: 'Ainda não há artigos',
  description: 'Põe um ficheiro Markdown em src/posts e ele aparece aqui.',
})

Com um ícone

O ícone é decoração — leva aria-hidden, porque o título já diz o que se passa.

Aqui não há nada

Esta pasta não tem páginas nenhumas.

empty({
  icon: icon('folder'),
  title: 'Aqui não há nada',
  description: 'Esta pasta não tem páginas nenhumas.',
})

Com uma ação

Os filhos passam a ser a fila de ações.

Sem resultados para «ilhas»

Confere a ortografia, ou percorre antes a documentação.

Percorrer a documentação

empty({
  icon: icon('search'),
  title: 'Sem resultados para «ilhas»',
  description: 'Confere a ortografia, ou percorre antes a documentação.',
},
  button({ href: '/pt/docs' }, 'Percorrer a documentação'),
  button({ variant: 'outline', color: 'neutral' }, 'Limpar a pesquisa'),
)

Num cartão

Publicações

Ainda não há publicações

Faz push para main e a primeira construção aparece aqui.

card(
  cardHeader({ title: 'Publicações' }),
  cardBody(
    empty({
      title: 'Ainda não há publicações',
      description: 'Faz push para main e a primeira construção aparece aqui.',
    }, button({ size: 'sm' }, 'Ligar um repositório')),
  ),
)

Em vez de uma tabela

Troca a tabela por um estado vazio em vez de desenhar um cabeçalho sem linha nenhuma por baixo.

Histórico de construções

Sem construções registadas

As execuções aparecem aqui assim que o site for publicado pelo menos uma vez.

return (() => {
  const rows = []

  return card(
    cardHeader({ title: 'Histórico de construções' }),
    rows.length
      ? table({ columns: [{ key: 'commit', header: 'Commit' }], rows })
      : cardBody(empty({
          title: 'Sem construções registadas',
          description: 'As execuções aparecem aqui assim que o site for publicado pelo menos uma vez.',
        })),
  )
})()

Props

Prop	Tipo	Predefinição	Descrição
`icon`	`Child`	—	Símbolo decorativo por cima do título; escondido dos leitores de ecrã.
`title`	`Child`	—	O que está vazio, em poucas palavras.
`description`	`Child`	—	Porque está vazio, ou o que fazer quanto a isso.

Os filhos são desenhados como a fila de ações sob a descrição.