From acb45bd27db37926292a9e9c597ed3268c9dabd1 Mon Sep 17 00:00:00 2001
From: Tedzury <asdrogachev@gmail.com>
Date: Fri, 5 Jan 2024 18:40:54 +0300
Subject: [PATCH] feat: add 404 page layout

---
 src/pages/Page404.tsx | 24 ++++++++++++++++++++++++
 src/router/router.tsx |  5 +++++
 2 files changed, 29 insertions(+)
 create mode 100644 src/pages/Page404.tsx

diff --git a/src/pages/Page404.tsx b/src/pages/Page404.tsx
new file mode 100644
index 0000000..e1988af
--- /dev/null
+++ b/src/pages/Page404.tsx
@@ -0,0 +1,24 @@
+import { Link } from 'react-router-dom';
+
+import ROUTES from '@/shared/constants/routes';
+
+const Page404 = () => {
+  return (
+    <section className="flex h-full w-full items-center justify-center">
+      <div className="mx-4 w-full max-w-[500px] rounded-md bg-surface-container p-8 text-center text-xl text-on-surface">
+        <p className="leading-10">
+          The route you are trying to reach does not exist <span className="text-4xl">🤷‍♂️</span>
+        </p>
+        <p>
+          Try to go{' '}
+          <Link className="text-primary" to={ROUTES.WELCOME_PAGE}>
+            Home
+          </Link>{' '}
+          instead
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export default Page404;
diff --git a/src/router/router.tsx b/src/router/router.tsx
index 13e141b..dcf2756 100644
--- a/src/router/router.tsx
+++ b/src/router/router.tsx
@@ -3,6 +3,7 @@ import { createHashRouter } from 'react-router-dom';
 import ErrorFallback from '@/components/ErrorFallback/ErrorFallback';
 import MainLayout from '@/layouts/MainLayout';
 import LoginPage from '@/pages/LoginPage';
+import Page404 from '@/pages/Page404';
 import SettignsPage from '@/pages/SettingsPage';
 import SignUpPage from '@/pages/SignUpPage';
 import WelcomePage from '@/pages/WelcomePage';
@@ -66,6 +67,10 @@ export const routes = [
           // </AuthAllowedOnly>
         ),
       },
+      {
+        path: '*',
+        element: <Page404 />,
+      },
     ],
   },
 ];