Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 1x 1x 13x 13x | import { Container, Stack, Text, Title } from '@mantine/core';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { FiHome } from 'react-icons/fi';
import { GiChefToque } from 'react-icons/gi';
import NavButton from '../components/buttons/NavButton';
import { PUBLIC_ROUTES } from '../types/routes';
export const dynamic = 'force-dynamic';
const NotFound = () => {
const translate = useTranslations('notFound');
return (
<Container size="sm" style={{ textAlign: 'center', paddingTop: '4rem' }}>
<Stack align="center" gap="xl">
<GiChefToque
size={120}
style={{ opacity: 0.5 }}
data-testid="icon-chef-hat"
/>
<Title order={1} size={80} fw={900} data-testid="notfound-title">
{translate('title')}
</Title>
<Stack align="center" gap="xs">
<Title order={2} size="h3" data-testid="notfound-heading">
{translate('heading')}
</Title>
<Text c="dimmed" size="lg" data-testid="notfound-description">
{translate('description')}
</Text>
<Text c="dimmed" size="sm" data-testid="notfound-hint">
{translate('hint')}
</Text>
</Stack>
<Link
href={PUBLIC_ROUTES.HOME}
style={{ textDecoration: 'none' }}
data-testid="back-home-link"
>
<NavButton
dataTestId="back-home"
label={translate('backButton')}
href={PUBLIC_ROUTES.HOME}
icon={<FiHome size={20} data-testid="icon-home" />}
/>
</Link>
</Stack>
</Container>
);
};
export default NotFound;
|