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.
Problem
Error and not-found states are completely unstyled across all pages:
<button className="underline"><div>with no layout, no styling at allProposed 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
errorMessageprop onSearchResultsPagecan be removed.