Skip to content

feat: add ErrorState component for failed and not-found UI #380

Description

@zigzagdev

Problem

Error and not-found states are completely unstyled across all pages:

  • TopPage: bare red text + <button className="underline">
  • DetailPage: naked <div> with no layout, no styling at all
  • SearchResults: tiny red text squeezed into the sticky header bar

Proposed solution

Create shared/uis/ErrorState.tsx — centered card with icon, title, optional description, and optional action button — and apply it to:

  • top-page-container.tsx (error → ErrorState with Retry)
  • world-heritage-detail-container.tsx (error / not-found → ErrorState with Back to list)
  • search-heritage-result-container.tsx (error / invalid response → ErrorState rendered standalone, not inside SearchResultsPage)

Once error states are moved to the container level, the errorMessage prop on SearchResultsPage can be removed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions