import { ErrorFallback } from '@/ui/error-boundary';

// The Companies page failed: the header stays, only the content area is replaced.
export default function ErrorBoundarySection() {
  return (
    <div className="flex w-full flex-col overflow-hidden rounded-xlarge shadow-raised">
      <div className="flex h-14 items-center border-b border-border px-300 text-heading-small leading-body font-semibold tracking-heading-small text-text">Companies</div>
      <div className="flex min-h-80 items-center justify-center">
        <ErrorFallback onRetry={() => {}} focusAction={false} />
      </div>
    </div>
  );
}

import { ErrorFallback } from '@/ui/error-boundary';

// Every page state with its way out. The crash shows its error ID for support.
export default function ErrorBoundaryProblems() {
  const card = 'rounded-xlarge shadow-raised';
  return (
    <div className="grid w-full grid-cols-1 gap-300 md:grid-cols-2">
      <ErrorFallback problem="crash" onRetry={() => {}} eventId="4f9c1e2a7b6d4c1f" focusAction={false} className={card} />
      <ErrorFallback problem="not-found" homeHref="#today" focusAction={false} className={card} />
      <ErrorFallback problem="no-access" agency="Northbridge" onSwitchAgency={() => {}} onSignOut={() => {}} focusAction={false} className={card} />
      <ErrorFallback problem="unavailable" onRetry={() => {}} focusAction={false} className={card} />
      <ErrorFallback problem="signed-out" signInHref="#sign-in" focusAction={false} className={card} />
      <ErrorFallback problem="offline" onRetry={() => {}} focusAction={false} className={card} />
    </div>
  );
}

import { ErrorFallback } from '@/ui/error-boundary';

// Only when the root layout itself throws: one sentence in place of the whole document.
export default function ErrorBoundaryApp() {
  return (
    <div className="flex min-h-72 w-full items-center justify-center rounded-xlarge shadow-raised">
      <ErrorFallback scope="app" />
    </div>
  );
}

import { PanelError } from '@/ui/error-boundary';

// One panel of a record page failed; the card takes its place and the rest of the page keeps working.
export default function ErrorBoundaryPanel() {
  return <PanelError className="max-w-120" onRetry={() => {}} eventId="9b1d7c3e5a2f4e8d" />;
}

import { useState } from 'react';
import { Button } from '@/ui/button';
import { ErrorBoundary } from '@/ui/error-boundary';

function Notes({ broken }: { broken: boolean }) {
  if (broken) throw new Error('Notes failed to draw');
  return <p className="text-body leading-body text-text">Called Maya on Tuesday: open to a move in January.</p>;
}

// A record page with two panels. Press Break the notes: only that panel shows the error card; the details keep working.
export default function ErrorBoundaryLive() {
  const [broken, setBroken] = useState(false);
  return (
    <div className="flex w-full flex-col items-start gap-200">
      <div className="grid w-full grid-cols-1 gap-200 md:grid-cols-2">
        <section aria-label="Details" className="flex flex-col gap-100 rounded-xlarge p-200 shadow-raised">
          <h3 className="text-heading-small leading-body font-semibold text-text">Maya Chen</h3>
          <p className="text-body leading-body text-text-subtle">Senior Data Engineer at Halcyon Bank</p>
        </section>
        <section aria-label="Notes" className="flex flex-col gap-100 rounded-xlarge p-200 shadow-raised">
          <h3 className="text-heading-small leading-body font-semibold text-text">Notes</h3>
          <ErrorBoundary onReset={() => setBroken(false)} onError={() => '9b1d7c3e5a2f4e8d'}>
            <Notes broken={broken} />
          </ErrorBoundary>
        </section>
      </div>
      <Button size="sm" onClick={() => setBroken(true)}>
        Break the notes
      </Button>
    </div>
  );
}