78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
// Next Imports
|
|
import Link from 'next/link'
|
|
import { useParams } from 'next/navigation'
|
|
|
|
// MUI Imports
|
|
import useMediaQuery from '@mui/material/useMediaQuery'
|
|
import { styled, useTheme } from '@mui/material/styles'
|
|
import Button from '@mui/material/Button'
|
|
import Typography from '@mui/material/Typography'
|
|
|
|
// Third-party Imports
|
|
import classnames from 'classnames'
|
|
|
|
// Type Imports
|
|
import type { SystemMode } from '@core/types'
|
|
import type { Locale } from '@/configs/i18n'
|
|
|
|
// Hook Imports
|
|
import { useImageVariant } from '@core/hooks/useImageVariant'
|
|
|
|
// Util Imports
|
|
import { getLocalizedUrl } from '@/utils/i18n'
|
|
|
|
// Styled Components
|
|
const MaskImg = styled('img')({
|
|
blockSize: 'auto',
|
|
maxBlockSize: 355,
|
|
inlineSize: '100%',
|
|
position: 'absolute',
|
|
insetBlockEnd: 0,
|
|
zIndex: -1
|
|
})
|
|
|
|
const NotAuthorized = ({ mode }: { mode: SystemMode }) => {
|
|
// Vars
|
|
const darkImg = '/images/pages/misc-mask-dark.png'
|
|
const lightImg = '/images/pages/misc-mask-light.png'
|
|
|
|
// Hooks
|
|
const theme = useTheme()
|
|
const { lang: locale } = useParams()
|
|
const hidden = useMediaQuery(theme.breakpoints.down('md'))
|
|
const miscBackground = useImageVariant(mode, lightImg, darkImg)
|
|
|
|
return (
|
|
<div className='flex items-center justify-center min-bs-[100dvh] relative p-6 overflow-x-hidden'>
|
|
<div className='flex items-center flex-col text-center'>
|
|
<div className='flex flex-col gap-2 is-[90vw] sm:is-[unset] mbe-6'>
|
|
<Typography className='font-medium text-8xl' color='text.primary'>
|
|
401
|
|
</Typography>
|
|
<Typography variant='h4'>You are not authorized! 🔐</Typography>
|
|
<Typography>You don't have permission to access this page. Go Home!</Typography>
|
|
</div>
|
|
<Button href={getLocalizedUrl('/', locale as Locale)} component={Link} variant='contained'>
|
|
Back To Home
|
|
</Button>
|
|
<img
|
|
alt='error-401-illustration'
|
|
src='/images/illustrations/characters/3.png'
|
|
className='object-cover bs-[400px] md:bs-[450px] lg:bs-[500px] mbs-10 md:mbs-14 lg:mbs-20'
|
|
/>
|
|
</div>
|
|
{!hidden && (
|
|
<MaskImg
|
|
alt='mask'
|
|
src={miscBackground}
|
|
className={classnames({ 'scale-x-[-1]': theme.direction === 'rtl' })}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default NotAuthorized
|