104 lines
2.4 KiB
TypeScript
104 lines
2.4 KiB
TypeScript
import {
|
|
Box,
|
|
MediumBreakpointBox,
|
|
VStack,
|
|
HStack,
|
|
} from '../elements/LayoutPrimitives'
|
|
import Image from 'next/image'
|
|
import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
|
|
import { StyledText } from '../elements/StyledText'
|
|
import Link from 'next/link'
|
|
import { theme } from '../tokens/stitches.config'
|
|
|
|
type ErrorPageStatusCode = 404 | 500
|
|
|
|
type ErrorLayoutProps = {
|
|
statusCode: ErrorPageStatusCode
|
|
}
|
|
|
|
export function ErrorLayout(props: ErrorLayoutProps): JSX.Element {
|
|
return (
|
|
<Box css={{ height: '100%' }}>
|
|
<MediumBreakpointBox
|
|
smallerLayoutNode={<MobileErrorLayout {...props} />}
|
|
largerLayoutNode={<MediumErrorLayout {...props} />}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
function MobileErrorLayout(props: ErrorLayoutProps) {
|
|
return (
|
|
<VStack css={{ overflow: 'scroll' }}>
|
|
<HStack
|
|
distribution="center"
|
|
css={{
|
|
maxHeight: '180px',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<OmnivoreIllustration />
|
|
</HStack>
|
|
<VStack
|
|
alignment="center"
|
|
distribution="center"
|
|
css={{
|
|
bg: '$yellow5',
|
|
width: '100%',
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<StyledText>{props.statusCode}</StyledText>
|
|
</VStack>
|
|
</VStack>
|
|
)
|
|
}
|
|
|
|
function MediumErrorLayout(props: ErrorLayoutProps) {
|
|
return (
|
|
<Box
|
|
css={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr 3fr',
|
|
bg: '$omnivoreYellow',
|
|
height: '100%',
|
|
}}
|
|
>
|
|
<VStack
|
|
alignment="start"
|
|
distribution="start"
|
|
css={{ height: '100%', m: '$2', '@md': { m: '$3' } }}
|
|
>
|
|
<Box>
|
|
<Link passHref href="/">
|
|
<a style={{ textDecoration: 'none' }}>
|
|
<OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} />
|
|
</a>
|
|
</Link>
|
|
</Box>
|
|
<StyledText>{props.statusCode}</StyledText>
|
|
</VStack>
|
|
<VStack alignment="center" distribution="center">
|
|
<OmnivoreIllustration isLargeLayout={true} />
|
|
</VStack>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
type OmnivoreIllustrationProps = {
|
|
isLargeLayout?: boolean
|
|
}
|
|
|
|
function OmnivoreIllustration({ isLargeLayout }: OmnivoreIllustrationProps) {
|
|
return (
|
|
<Image
|
|
src={`/static/images/landing-illustration${
|
|
isLargeLayout ? '.png' : '-mobile.svg'
|
|
}`}
|
|
alt="Illustration of Woman Reading"
|
|
width={isLargeLayout ? 1280 : 375}
|
|
height={isLargeLayout ? 1164 : 230}
|
|
/>
|
|
)
|
|
}
|