43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
interface ErrorStateProps {
|
|
message: string
|
|
action?: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
function ErrorIcon(): React.ReactElement {
|
|
return (
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function ErrorState({ message, action, className = '' }: ErrorStateProps): React.ReactElement {
|
|
return (
|
|
<div className={`bg-red-900/20 border border-red-500/50 rounded-lg p-4 ${className}`} role="alert">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 text-red-400">
|
|
<ErrorIcon />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm text-red-400 font-medium mb-2">{message}</p>
|
|
{action && <div className="mt-3">{action}</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|