mirror of
https://github.com/suitenumerique/docs
synced 2026-04-21 13:37:20 +00:00
75 lines
2 KiB
TypeScript
75 lines
2 KiB
TypeScript
import { Button } from '@openfun/cunningham-react';
|
|
import Head from 'next/head';
|
|
import Image from 'next/image';
|
|
import { ReactElement } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import styled from 'styled-components';
|
|
|
|
import img403 from '@/assets/icons/icon-403.png';
|
|
import { Box, Icon, StyledLink, Text } from '@/components';
|
|
import { PageLayout } from '@/layouts';
|
|
import { NextPageWithLayout } from '@/types/next';
|
|
|
|
const StyledButton = styled(Button)`
|
|
width: fit-content;
|
|
`;
|
|
|
|
const Page: NextPageWithLayout = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>
|
|
{t('Page Not Found - Error 404')} - {t('Docs')}
|
|
</title>
|
|
<meta
|
|
property="og:title"
|
|
content={`${t('Page Not Found - Error 404')} - ${t('Docs')}`}
|
|
key="title"
|
|
/>
|
|
</Head>
|
|
<Box
|
|
$align="center"
|
|
$margin="auto"
|
|
$gap="1rem"
|
|
$padding={{ bottom: '2rem' }}
|
|
>
|
|
<Text as="h1" $textAlign="center" className="sr-only">
|
|
{t('Page Not Found - Error 404')} - {t('Docs')}
|
|
</Text>
|
|
<Image
|
|
className="c__image-system-filter"
|
|
src={img403}
|
|
alt=""
|
|
width={300}
|
|
height={300}
|
|
style={{
|
|
maxWidth: '100%',
|
|
height: 'auto',
|
|
}}
|
|
/>
|
|
|
|
<Box $align="center" $gap="0.8rem">
|
|
<Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
|
|
{t(
|
|
'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
|
|
)}
|
|
</Text>
|
|
|
|
<StyledLink href="/">
|
|
<StyledButton icon={<Icon iconName="house" $color="white" />}>
|
|
{t('Home')}
|
|
</StyledButton>
|
|
</StyledLink>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
Page.getLayout = function getLayout(page: ReactElement) {
|
|
return <PageLayout withFooter={false}>{page}</PageLayout>;
|
|
};
|
|
|
|
export default Page;
|