stack/apps/web/src/spa/pages/resource-route-error-boundaries.tsx

import type { ReactElement } from 'react';
import { useRouteError } from 'react-router-dom';

interface ResourceRouteErrorBoundaryProps {
  message: string;
  href: string;
  linkLabel: string;
}

function ResourceRouteErrorBoundary({
  message,
  href,
  linkLabel,
}: ResourceRouteErrorBoundaryProps): ReactElement {
  useRouteError();

  return (
    <div role="alert" className="flex min-h-screen flex-col items-center justify-center gap-3 p-8">
      <p className="text-sm font-medium">{message}</p>
      <a href={href} className="text-sm underline">
        {linkLabel}
      </a>
    </div>
  );
}

export function ProjectsRouteErrorBoundary(): ReactElement {
  return (
    <ResourceRouteErrorBoundary
      message="Something went wrong loading projects."
      href="/projects"
      linkLabel="Reload projects"
    />
  );
}

export function ProjectDetailRouteErrorBoundary(): ReactElement {
  return (
    <ResourceRouteErrorBoundary
      message="Something went wrong loading this project."
      href="/projects"
      linkLabel="Back to projects"
    />
  );
}

export function TasksRouteErrorBoundary(): ReactElement {
  return (
    <ResourceRouteErrorBoundary
      message="Something went wrong loading tasks."
      href="/tasks"
      linkLabel="Reload tasks"
    />
  );
}