docs-sample-apps/client/app/components/ui/ErrorDisplay.tsx at 5bf8b37125777e288ef64f8f4b4ba6f931a28766 · jordan-smith721/docs-sample-apps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/**
 * Error component for displaying error states
 */

interface ErrorDisplayProps {
  message?: string;
  onRetry?: () => void;
}

export default function ErrorDisplay({
  message = "Something went wrong",
  onRetry
}: ErrorDisplayProps) {
  return (
    <div className="error-display">
      <h2>Error</h2>
      <p>{message}</p>
      {onRetry && (
        <button onClick={onRetry} type="button">
          Try Again
        </button>
      )}

      <style jsx>{`
        .error-display {
          text-align: center;
          padding: 2rem;
          border: 1px solid #fee2e2;
          border-radius: 8px;
          background-color: #fef2f2;
          color: #991b1b;
        }

        .error-display h2 {
          margin: 0 0 1rem 0;
          color: #dc2626;
        }

        .error-display button {
          margin-top: 1rem;
          padding: 0.5rem 1rem;
          background: #dc2626;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }

        .error-display button:hover {
          background: #b91c1c;
        }
      `}</style>
    </div>
  );
}