1 files changed, 144 insertions, 0 deletions
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 0000000..7459c80
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,144 @@
+import Link from '@components/atoms/links/link';
+import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import LinksListWidget from '@components/organisms/widgets/links-list-widget';
+import PageLayout from '@components/templates/page/page-layout';
+import {
+  getThematicsPreview,
+  getTotalThematics,
+} from '@services/graphql/thematics';
+import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics';
+import {
+  type RawThematicPreview,
+  type RawTopicPreview,
+} from '@ts/types/raw-data';
+import { loadTranslation, type Messages } from '@utils/helpers/i18n';
+import {
+  getLinksListItems,
+  getPageLinkFromRawData,
+} from '@utils/helpers/pages';
+import useSettings from '@utils/hooks/use-settings';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { ReactNode } from 'react';
+import { useIntl } from 'react-intl';
+
+type Error404PageProps = {
+  thematicsList: RawThematicPreview[];
+  topicsList: RawTopicPreview[];
+  translation: Messages;
+};
+
+/**
+ * Error 404 page.
+ */
+const Error404Page: NextPage<Error404PageProps> = ({
+  thematicsList,
+  topicsList,
+}) => {
+  const intl = useIntl();
+  const { website } = useSettings();
+  const title = intl.formatMessage({
+    defaultMessage: 'Page not found',
+    description: 'Error404Page: page title',
+    id: 'KnWeKh',
+  });
+  const body = intl.formatMessage(
+    {
+      defaultMessage:
+        'Sorry, it seems that the page your are looking for does not exist. If you think this path should work, feel free to <link>contact me</link> with the necessary information so that I can fix the problem.',
+      id: '9sGNKq',
+      description: 'Error404Page: page body',
+    },
+    {
+      link: (chunks: ReactNode) => <Link href="/contact">{chunks}</Link>,
+    }
+  );
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'error-404', name: title, url: '/404' },
+  ];
+  const pageTitle = intl.formatMessage(
+    {
+      defaultMessage: 'Error 404: Page not found - {websiteName}',
+      description: '404Page: SEO - Page title',
+      id: '310o3F',
+    },
+    { websiteName: website.name }
+  );
+  const pageDescription = intl.formatMessage({
+    defaultMessage: 'Page not found.',
+    description: '404Page: SEO - Meta description',
+    id: '48Ww//',
+  });
+  const thematicsListTitle = intl.formatMessage({
+    defaultMessage: 'Thematics',
+    description: 'Error404Page: thematics list widget title',
+    id: 'HohQPh',
+  });
+
+  const topicsListTitle = intl.formatMessage({
+    defaultMessage: 'Topics',
+    description: 'Error404Page: topics list widget title',
+    id: 'GVpTIl',
+  });
+
+  return (
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+        <meta name="description" content={pageDescription} />
+      </Head>
+      <PageLayout
+        title={title}
+        breadcrumb={breadcrumb}
+        widgets={[
+          <LinksListWidget
+            key="thematics-list"
+            items={getLinksListItems(
+              thematicsList.map(getPageLinkFromRawData),
+              'thematic'
+            )}
+            title={thematicsListTitle}
+            level={2}
+          />,
+          <LinksListWidget
+            key="topics-list"
+            items={getLinksListItems(
+              topicsList.map(getPageLinkFromRawData),
+              'topic'
+            )}
+            title={topicsListTitle}
+            level={2}
+          />,
+        ]}
+      >
+        {body}
+      </PageLayout>
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps<Error404PageProps> = async ({
+  locale,
+}) => {
+  const totalThematics = await getTotalThematics();
+  const thematics = await getThematicsPreview({ first: totalThematics });
+  const totalTopics = await getTotalTopics();
+  const topics = await getTopicsPreview({ first: totalTopics });
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      thematicsList: thematics.edges.map((edge) => edge.node),
+      topicsList: topics.edges.map((edge) => edge.node),
+      translation,
+    },
+  };
+};
+
+export default Error404Page;