feat: add example error page for settings

src/pages/settings/error-example/index.tsx

@@ -0,0 +1,4 @@
+export default function ErrorExample() {
+  throw Error('an error occurs while loading this component')
+  return <h1>Error Example</h1>
+}

src/pages/settings/index.tsx

@@ -1,6 +1,7 @@
 import { Outlet } from 'react-router-dom'
 import {
   IconBrowserCheck,
+  IconExclamationCircle,
   IconNotification,
   IconPalette,
   IconTool,
@@ -38,7 +39,7 @@ export default function Settings() {
           <aside className='sticky top-0 lg:w-1/5'>
             <SidebarNav items={sidebarNavItems} />
           </aside>
-          <div className='p-1 pr-4 lg:max-w-xl'>
+          <div className='w-full p-1 pr-4 lg:max-w-xl'>
             <div className='pb-16'>
               <Outlet />
             </div>
@@ -75,4 +76,9 @@ const sidebarNavItems = [
     icon: <IconBrowserCheck size={18} />,
     href: '/settings/display',
   },
+  {
+    title: 'Error Example',
+    icon: <IconExclamationCircle size={18} />,
+    href: '/settings/error-example',
+  },
 ]

src/router.tsx

@@ -83,6 +83,14 @@ const router = createBrowserRouter([
               Component: (await import('./pages/settings/display')).default,
             }),
           },
+          {
+            path: 'error-example',
+            lazy: async () => ({
+              Component: (await import('./pages/settings/error-example'))
+                .default,
+            }),
+            errorElement: <GeneralError className='h-[50svh]' minimal />,
+          },
         ],
       },
     ],