| import React from "react"; |
| import { motion } from "framer-motion"; |
| import { AlertTriangle, RefreshCw, Hash } from "lucide-react"; |
| import { Button } from "../ui/Button"; |
|
|
| export function ErrorState({ |
| title = "Analysis Encountered an Issue", |
| description = "We were unable to complete the analysis. Please check your network connection or try again.", |
| code, |
| requestId, |
| onRetry, |
| actionLabel = "Retry Analysis", |
| style = {}, |
| }) { |
| return ( |
| <motion.div |
| role="alert" |
| aria-live="assertive" |
| initial={{ opacity: 0, y: 12 }} |
| animate={{ opacity: 1, y: 0 }} |
| transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }} |
| style={{ |
| padding: "40px 28px", |
| textAlign: "center", |
| border: "1px solid var(--danger-border, rgba(239, 68, 68, 0.3))", |
| background: "linear-gradient(160deg, rgba(239,68,68,0.05) 0%, var(--bg-surface) 100%)", |
| borderRadius: "var(--radius-lg, 16px)", |
| maxWidth: "640px", |
| margin: "24px auto", |
| position: "relative", |
| overflow: "hidden", |
| ...style, |
| }} |
| > |
| {/* Subtle danger radial glow */} |
| <div |
| aria-hidden="true" |
| style={{ |
| position: "absolute", |
| inset: 0, |
| background: |
| "radial-gradient(ellipse 60% 40% at 50% 0%, rgba(239,68,68,0.06) 0%, transparent 70%)", |
| pointerEvents: "none", |
| }} |
| /> |
| |
| <div |
| aria-hidden="true" |
| style={{ |
| width: 60, |
| height: 60, |
| borderRadius: "50%", |
| background: "rgba(239, 68, 68, 0.12)", |
| border: "1px solid var(--danger-border, rgba(239, 68, 68, 0.4))", |
| display: "flex", |
| alignItems: "center", |
| justifyContent: "center", |
| margin: "0 auto 20px", |
| color: "var(--danger, #EF4444)", |
| position: "relative", |
| boxShadow: "0 0 0 8px rgba(239,68,68,0.04)", |
| }} |
| > |
| <AlertTriangle size={28} /> |
| </div> |
| |
| <h3 |
| style={{ |
| fontSize: "17px", |
| fontWeight: 700, |
| color: "var(--text-primary)", |
| marginBottom: "8px", |
| letterSpacing: "-0.01em", |
| lineHeight: 1.3, |
| }} |
| > |
| {title} |
| </h3> |
| |
| <p |
| style={{ |
| fontSize: "13.5px", |
| color: "var(--text-secondary)", |
| maxWidth: "460px", |
| margin: "0 auto 18px", |
| lineHeight: 1.6, |
| }} |
| > |
| {description} |
| </p> |
| |
| {(code || requestId) && ( |
| <div |
| style={{ |
| display: "inline-flex", |
| alignItems: "center", |
| gap: "12px", |
| background: "var(--bg-surface)", |
| border: "1px solid var(--border)", |
| borderRadius: "var(--radius-md)", |
| padding: "6px 12px", |
| fontSize: "11px", |
| fontFamily: "var(--font-mono)", |
| color: "var(--text-muted)", |
| marginBottom: "20px", |
| flexWrap: "wrap", |
| justifyContent: "center", |
| }} |
| > |
| {code && ( |
| <span> |
| Code: <strong style={{ color: "var(--text-primary)" }}>{code}</strong> |
| </span> |
| )} |
| {requestId && ( |
| <span style={{ display: "flex", alignItems: "center", gap: "4px" }}> |
| <Hash size={12} color="var(--color-teal)" /> Request ID:{" "} |
| <strong style={{ color: "var(--color-teal)" }}>{requestId}</strong> |
| </span> |
| )} |
| </div> |
| )} |
| |
| {onRetry && ( |
| <div style={{ marginTop: "8px" }}> |
| <Button variant="primary" icon={RefreshCw} onClick={onRetry}> |
| {actionLabel} |
| </Button> |
| </div> |
| )} |
| </motion.div> |
| ); |
| } |
|
|
| export default ErrorState; |
|
|
