Empty States

1import { EmptyState } from '@/ui/Feedback'23// Always distinguish the four kinds — they need different actions4function DeploymentList({ items, query, filters, loading, error }) {5  if (loading) return <DeploymentSkeletons />          // never "empty"6  if (error) return <ErrorState error={error} onRetry={refetch} />78  if (items.length === 0) {9    const filtered = query || filters.length > 01011    return filtered ? (12      <EmptyState13        icon={<SearchX size={22} />}14        title={'No deployments match “' + query + '”'}15        description="Try a shorter term, or clear the environment filter."16        action={<Button onClick={clearFilters}>Clear filters</Button>}17      />18    ) : (19      <EmptyState20        icon={<FolderPlus size={22} />}21        title="No deployments yet"22        description="Connect a repository and we will build and deploy on every push."23        action={<Button onClick={connect}>Connect a repository</Button>}24        secondaryAction={<Button variant="text" onClick={demo}>Deploy a sample</Button>}25      />26    )27  }2829  return <List items={items} />30}3132// Announce the change for screen-reader users33<div aria-live="polite" className="sr-only">34  {items.length === 0 ? 'No results' : items.length + ' results'}35</div>

<div class="ds-empty" role="status">
  <span class="ds-empty__icon" aria-hidden="true">
    <svg>…</svg>
  </span>
  <h3 class="ds-empty__title">No projects yet</h3>
  <p class="ds-empty__desc">
    A project holds your services, environments and deployments.
  </p>
  <div class="ds-empty__actions">
    <button class="ds-btn ds-btn--filled">Create a project</button>
    <button class="ds-btn ds-btn--text">Import from GitHub</button>
  </div>
</div>

.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 32px;                  /* the emptiness is the point */
  text-align: center;
}
.ds-empty--compact { gap: 12px; padding: 40px 24px; }

.ds-empty__icon {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface-inset);
  color: var(--ds-fg-muted);
}

.ds-empty__title { font-size: 1.1875rem; font-weight: 600; }

/* Centred text needs a narrower measure — every line starts somewhere new */
.ds-empty__desc {
  max-inline-size: 24rem;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ds-fg-muted);
}

.ds-empty__actions { display: flex; gap: 8px; margin-block-start: 4px; }

/* Stack the actions on narrow screens rather than shrinking them */
@media (max-width: 480px) {
  .ds-empty__actions { flex-direction: column; inline-size: 100%; }
  .ds-empty__actions > * { inline-size: 100%; }
}