Drew Galbraith
d60d834f38
Sets up API methods and types. Sets up a colorscheme. Sets up a homepage. Removes tailwind in favor of mui for now. Reviewed-on: #7 Co-authored-by: Drew Galbraith <drew@tiramisu.one> Co-committed-by: Drew Galbraith <drew@tiramisu.one>
64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
Alert,
|
|
AlertTitle,
|
|
Box,
|
|
Button,
|
|
Container,
|
|
Typography,
|
|
Paper,
|
|
} from '@mui/material'
|
|
import {
|
|
Refresh as RefreshIcon,
|
|
BugReport as BugReportIcon,
|
|
} from '@mui/icons-material'
|
|
|
|
interface ErrorFallbackProps {
|
|
error: Error
|
|
resetError: () => void
|
|
}
|
|
|
|
export default function ErrorFallback({
|
|
error,
|
|
resetError,
|
|
}: ErrorFallbackProps) {
|
|
return (
|
|
<Container maxWidth="md" sx={{ py: 8 }}>
|
|
<Paper sx={{ p: 4, textAlign: 'center' }}>
|
|
<Box sx={{ mb: 3 }}>
|
|
<BugReportIcon sx={{ fontSize: 64, color: 'error.main', mb: 2 }} />
|
|
<Typography variant="h4" gutterBottom>
|
|
Something went wrong
|
|
</Typography>
|
|
<Typography variant="body1" color="text.secondary">
|
|
An unexpected error occurred. Please try refreshing the page or
|
|
contact support if the problem persists.
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Alert severity="error" sx={{ mb: 3, textAlign: 'left' }}>
|
|
<AlertTitle>Error Details</AlertTitle>
|
|
{error.message}
|
|
</Alert>
|
|
|
|
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
|
|
<Button
|
|
variant="contained"
|
|
startIcon={<RefreshIcon />}
|
|
onClick={resetError}
|
|
size="large"
|
|
>
|
|
Try Again
|
|
</Button>
|
|
<Button
|
|
variant="outlined"
|
|
onClick={() => window.location.reload()}
|
|
size="large"
|
|
>
|
|
Reload Page
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
</Container>
|
|
)
|
|
}
|