Spaces:
Running
Running
| import React from "react"; | |
| export interface ErrorStateProps { | |
| icon?: React.ReactNode; | |
| title: string; | |
| subtitle?: string; | |
| action?: React.ReactNode; | |
| className?: string; | |
| style?: React.CSSProperties; | |
| } | |
| export function ErrorState({ | |
| icon, | |
| title, | |
| subtitle, | |
| action, | |
| className = "", | |
| style, | |
| }: ErrorStateProps) { | |
| return ( | |
| <div | |
| role="alert" | |
| className={`error-state ${className}`} | |
| style={{ | |
| background: "rgba(239, 68, 68, 0.05)", | |
| border: "1px solid rgba(239, 68, 68, 0.25)", | |
| borderRadius: "var(--radius-md, 2px)", | |
| textAlign: "center", | |
| padding: "var(--space-8, 2rem)", | |
| color: "var(--text-secondary, #A7A3B4)", | |
| ...style, | |
| }} | |
| > | |
| {icon && ( | |
| <div style={{ marginBottom: "var(--space-3, 0.75rem)", color: "var(--color-error, #EF4444)" }}> | |
| {icon} | |
| </div> | |
| )} | |
| <p | |
| style={{ | |
| fontWeight: 600, | |
| marginBottom: subtitle ? "var(--space-1, 0.25rem)" : 0, | |
| color: "var(--text-primary, #F6F4F8)", | |
| fontSize: "var(--text-sm, 0.875rem)", | |
| }} | |
| > | |
| {title} | |
| </p> | |
| {subtitle && ( | |
| <p | |
| style={{ | |
| fontSize: "var(--text-sm, 0.875rem)", | |
| marginBottom: action ? "var(--space-4, 1rem)" : 0, | |
| color: "var(--text-tertiary, #6D697C)", | |
| }} | |
| > | |
| {subtitle} | |
| </p> | |
| )} | |
| {action && <div>{action}</div>} | |
| </div> | |
| ); | |
| } | |