52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
|
|
interface ErrorStateProps {
|
|
error: string
|
|
onRetry?: () => void
|
|
onGoBack?: () => void
|
|
className?: string
|
|
}
|
|
|
|
export const ErrorState: React.FC<ErrorStateProps> = ({
|
|
error,
|
|
onRetry,
|
|
onGoBack,
|
|
className = ''
|
|
}) => {
|
|
return (
|
|
<div className={`min-h-screen bg-gray-50 flex items-center justify-center ${className}`}>
|
|
<div className="text-center max-w-md mx-auto p-6">
|
|
<div className="text-red-600 text-6xl mb-4">
|
|
<svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
</svg>
|
|
</div>
|
|
<div className="text-red-600 text-lg mb-4 font-medium">{error}</div>
|
|
<div className="flex gap-3 justify-center">
|
|
{onRetry && (
|
|
<button
|
|
onClick={onRetry}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
重試
|
|
</button>
|
|
)}
|
|
{onGoBack && (
|
|
<button
|
|
onClick={onGoBack}
|
|
className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center gap-2"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
返回
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |