mirror of
https://github.com/D4M13N-D3V/comissions-app-ui.git
synced 2025-03-14 08:15:08 +00:00
75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
|
// ** React Imports
|
|||
|
|
import { ReactNode } from 'react'
|
|||
|
|
|
|||
|
|
// ** Next Import
|
|||
|
|
import Link from 'next/link'
|
|||
|
|
|
|||
|
|
// ** MUI Components
|
|||
|
|
import Button from '@mui/material/Button'
|
|||
|
|
import { styled } from '@mui/material/styles'
|
|||
|
|
import Typography from '@mui/material/Typography'
|
|||
|
|
import Box, { BoxProps } from '@mui/material/Box'
|
|||
|
|
|
|||
|
|
// ** Layout Import
|
|||
|
|
import BlankLayout from '../core/layouts/BlankLayout'
|
|||
|
|
|
|||
|
|
// ** Demo Imports
|
|||
|
|
import FooterIllustrations from '../views/pages/misc/FooterIllustrations'
|
|||
|
|
|
|||
|
|
// ** Styled Components
|
|||
|
|
const BoxWrapper = styled(Box)<BoxProps>(({ theme }) => ({
|
|||
|
|
[theme.breakpoints.down('md')]: {
|
|||
|
|
width: '90vw'
|
|||
|
|
}
|
|||
|
|
}))
|
|||
|
|
|
|||
|
|
const Img = styled('img')(({ theme }) => ({
|
|||
|
|
marginBottom: theme.spacing(10),
|
|||
|
|
[theme.breakpoints.down('lg')]: {
|
|||
|
|
height: 450,
|
|||
|
|
marginTop: theme.spacing(10)
|
|||
|
|
},
|
|||
|
|
[theme.breakpoints.down('md')]: {
|
|||
|
|
height: 400
|
|||
|
|
},
|
|||
|
|
[theme.breakpoints.up('lg')]: {
|
|||
|
|
marginTop: theme.spacing(13)
|
|||
|
|
}
|
|||
|
|
}))
|
|||
|
|
|
|||
|
|
const TreeIllustration = styled('img')(({ theme }) => ({
|
|||
|
|
left: 0,
|
|||
|
|
bottom: '5rem',
|
|||
|
|
position: 'absolute',
|
|||
|
|
[theme.breakpoints.down('lg')]: {
|
|||
|
|
bottom: 0
|
|||
|
|
}
|
|||
|
|
}))
|
|||
|
|
|
|||
|
|
const Error404 = () => {
|
|||
|
|
return (
|
|||
|
|
<Box className='content-center'>
|
|||
|
|
<Box sx={{ p: 5, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
|||
|
|
<BoxWrapper>
|
|||
|
|
<Typography variant='h1'>404</Typography>
|
|||
|
|
<Typography variant='h5' sx={{ mb: 1, fontSize: '1.5rem !important' }}>
|
|||
|
|
Page Not Found ⚠️
|
|||
|
|
</Typography>
|
|||
|
|
<Typography variant='body2'>We couldn′t find the page you are looking for.</Typography>
|
|||
|
|
</BoxWrapper>
|
|||
|
|
<Img height='487' alt='error-illustration' src='/images/pages/404.png' />
|
|||
|
|
<Link passHref href='/'>
|
|||
|
|
<Button variant='contained' sx={{ px: 5.5 }}>
|
|||
|
|
Back to Home
|
|||
|
|
</Button>
|
|||
|
|
</Link>
|
|||
|
|
</Box>
|
|||
|
|
<FooterIllustrations image={<TreeIllustration alt='tree' src='/images/pages/tree.png' />} />
|
|||
|
|
</Box>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Error404.getLayout = (page: ReactNode) => <BlankLayout>{page}</BlankLayout>
|
|||
|
|
|
|||
|
|
export default Error404
|