| 9 | } |
| 10 | |
| 11 | export function ErrorState({ error }: ErrorStateProps) { |
| 12 | const isNetwork = error instanceof NetworkError |
| 13 | const title = isNetwork ? 'Server Connection Lost' : 'Error' |
| 14 | const message = isNetwork |
| 15 | ? 'Unable to connect to the bundle analyzer server. Please ensure the server is running and try again.' |
| 16 | : ((error as any)?.message ?? 'An unexpected error occurred.') |
| 17 | |
| 18 | return ( |
| 19 | <div className="flex-1 flex items-center justify-center"> |
| 20 | <div className="text-center space-y-4 max-w-md px-6"> |
| 21 | <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-destructive/10 text-destructive mb-2"> |
| 22 | <AlertTriangle className="w-8 h-8" /> |
| 23 | </div> |
| 24 | <div> |
| 25 | <h3 className="text-lg font-semibold text-foreground mb-2"> |
| 26 | {title} |
| 27 | </h3> |
| 28 | <p className="text-sm text-muted-foreground mb-4">{message}</p> |
| 29 | <button |
| 30 | onClick={() => { |
| 31 | window.location.reload() |
| 32 | }} |
| 33 | className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors text-sm font-medium" |
| 34 | > |
| 35 | <RefreshCw className="w-4 h-4" /> |
| 36 | Retry Connection |
| 37 | </button> |
| 38 | </div> |
| 39 | </div> |
| 40 | </div> |
| 41 | ) |
| 42 | } |