61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
'use client';
|
||
|
||
interface ErrorDisplayProps {
|
||
error: string | Error | null;
|
||
onRetry?: () => void;
|
||
}
|
||
|
||
export function ErrorDisplay({ error, onRetry }: ErrorDisplayProps) {
|
||
if (!error) return null;
|
||
|
||
const errorMessage = error instanceof Error ? error.message : error;
|
||
|
||
return (
|
||
<div style={{
|
||
padding: '16px',
|
||
margin: '16px 0',
|
||
background: 'var(--md-sys-color-error-container)',
|
||
color: 'var(--md-sys-color-on-error-container)',
|
||
borderRadius: '12px',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
gap: '16px'
|
||
}}>
|
||
<div style={{ flex: 1 }}>
|
||
<p style={{
|
||
margin: 0,
|
||
fontSize: '14px',
|
||
fontWeight: '500'
|
||
}}>
|
||
Ошибка
|
||
</p>
|
||
<p style={{
|
||
margin: '4px 0 0 0',
|
||
fontSize: '14px',
|
||
opacity: 0.9
|
||
}}>
|
||
{errorMessage}
|
||
</p>
|
||
</div>
|
||
{onRetry && (
|
||
<button
|
||
onClick={onRetry}
|
||
style={{
|
||
padding: '8px 16px',
|
||
background: 'var(--md-sys-color-error)',
|
||
color: 'var(--md-sys-color-on-error)',
|
||
border: 'none',
|
||
borderRadius: '8px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
fontWeight: '500'
|
||
}}
|
||
>
|
||
Повторить
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|