Пустое состояние

Пустое место читается как баг. Пустое состояние говорит, какое место пусто, почему и что делать дальше, — и это тот случай, о котором забывают проще всего, ведь при разработке данные есть всегда.

Простое пустое состояние

Постов пока нет

Добавьте Markdown-файл в src/posts, и он появится здесь.

empty({
  title: 'Постов пока нет',
  description: 'Добавьте Markdown-файл в src/posts, и он появится здесь.',
})

С иконкой

Иконка декоративна: она помечена aria-hidden, потому что заголовок уже говорит, что происходит.

Здесь ничего нет

В этой папке нет ни одной страницы.

empty({
  icon: icon('folder'),
  title: 'Здесь ничего нет',
  description: 'В этой папке нет ни одной страницы.',
})

С действием

Потомки становятся строкой действий.

Ничего не найдено по запросу «острова»

Проверьте написание или просто полистайте документацию.

Открыть документацию

empty({
  icon: icon('search'),
  title: 'Ничего не найдено по запросу «острова»',
  description: 'Проверьте написание или просто полистайте документацию.',
},
  button({ href: '/ru/docs' }, 'Открыть документацию'),
  button({ variant: 'outline', color: 'neutral' }, 'Очистить поиск'),
)

В карточке

Развёртывания

Развёртываний пока нет

Запушьте в main, и первая сборка появится здесь.

card(
  cardHeader({ title: 'Развёртывания' }),
  cardBody(
    empty({
      title: 'Развёртываний пока нет',
      description: 'Запушьте в main, и первая сборка появится здесь.',
    }, button({ size: 'sm' }, 'Подключить репозиторий')),
  ),
)

Вместо таблицы

Замените таблицу пустым состоянием, вместо того чтобы рисовать шапку без единой строки под ней.

История сборок

Сборок не записано

Запуски появятся здесь, как только сайт развернут хотя бы раз.

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

  return card(
    cardHeader({ title: 'История сборок' }),
    rows.length
      ? table({ columns: [{ key: 'commit', header: 'Коммит' }], rows })
      : cardBody(empty({
          title: 'Сборок не записано',
          description: 'Запуски появятся здесь, как только сайт развернут хотя бы раз.',
        })),
  )
})()

Пропсы

Проп	Тип	По умолчанию	Описание
`icon`	`Child`	—	Декоративный значок над заголовком; скрыт от скринридеров.
`title`	`Child`	—	Что именно пусто, в двух словах.
`description`	`Child`	—	Почему пусто или что с этим делать.

Потомки рисуются как строка действий под описанием.