From 2c31c279a1e7d1edd3f10ebfaa73c413c6561f2b Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Tue, 12 Nov 2024 14:22:54 +0100
Subject: [PATCH] refactor(404): more generic error page

---
 src/pages/404.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 1c53760..d3e5a77 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,17 +1,27 @@
-import { Link } from 'react-router-dom'
+import { Link, useRouteError } from 'react-router-dom'
 import { appRoutes } from 'routes'
 
-export const NotFoundPage = () => {
+interface NotFoundPageProps {
+  title: string
+  message: string
+}
+
+export const NotFoundPage = ({
+  title = 'Page not found',
+  message = "The page you're attempting to visit doesn't exist"
+}: Partial<NotFoundPageProps>) => {
+  const error = useRouteError() as Partial<NotFoundPageProps>
+
   return (
     <div className='InnerBodyMain'>
       <div className='ContainerMain'>
         <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
           <div className='IBMSecMain IBMSMListWrapper'>
             <div className='IBMSMTitleMain'>
-              <h2 className='IBMSMTitleMainHeading'>Page not found</h2>
+              <h2 className='IBMSMTitleMainHeading'>{error?.title || title}</h2>
             </div>
             <div>
-              <p>The page you're attempting to visit doesn't exist</p>
+              <p>{error?.message || message}</p>
             </div>
             <div className='IBMSMAction'>
               <Link