Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 13x 13x 13x 3x 2x 13x 1x 13x | import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import { useNavigate } from 'react-router-dom';
import Seo from '../Seo';
import { useTranslation } from 'react-i18next';
interface ErrorDisplayProps {
title: string;
message: string;
showRetry?: boolean;
retryButtonText?: string;
onRetry?: () => void;
showHome?: boolean;
homeButtonText?: string;
}
export function ErrorDisplay({
title,
message,
showRetry = true,
retryButtonText,
onRetry,
showHome = true,
homeButtonText,
}: ErrorDisplayProps) {
const navigate = useNavigate();
const { t } = useTranslation();
// Handlers
const handleRetry = () => {
if (onRetry) {
onRetry();
}
};
const handleHome = () => {
navigate('/');
};
return (
<>
<Seo title={t('errors.seoTitle')} description={t('errors.seoDescription')} />
<Box sx={{ p: 4, textAlign: 'center' }}>
<Typography variant="h5" gutterBottom>
{title}
</Typography>
<Typography variant="body1" sx={{ mb: 2 }}>
{message}
</Typography>
{showRetry && (
<Button variant="text" onClick={handleRetry}>
{retryButtonText}
</Button>
)}
{showHome && (
<Button
variant="contained"
onClick={handleHome}
sx={{ ml: 2 }}
>
{homeButtonText}
</Button>
)}
</Box>
</>
);
}
|