Create custom 500 page

src/app/error.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import HttpStatusPage from '@/components/HttpStatusPage';
+
+export default function Error() {
+  return (
+    <HttpStatusPage status={500}>
+      Something went wrong
+    </HttpStatusPage>
+  );
+}

src/app/not-found.tsx

@@ -1,45 +1,22 @@
 'use client';
 
-import SiteGrid from '@/components/SiteGrid';
-import { PATH_ROOT } from '@/site/paths';
+import HttpStatusPage from '@/components/HttpStatusPage';
 import { clsx } from 'clsx/lite';
-import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
 export default function NotFound() {
   const pathname = usePathname();
 
   return (
-    <SiteGrid contentMain={
-      <div className={clsx(
-        'min-h-72 sm:min-h-96',
-        'flex flex-col items-center justify-center gap-3',
+    <HttpStatusPage status={404}>
+      <span className={clsx(
+        'underline underline-offset-2 decoration-dotted',
+        'cursor-not-allowed',
       )}>
-        <h1 className={clsx(
-          'text-[100px] sm:text-[120px] leading-none',
-          'text-gray-800 dark:text-gray-200',
-        )}>
-          404
-        </h1>
-        <div className="flex flex-col gap-6 text-center text-dim">
-          <div>
-            <span className={clsx(
-              'underline underline-offset-2 decoration-dotted',
-              'cursor-not-allowed',
-            )}>
-              {pathname}
-            </span>
-            {' '}
-            could not be found
-          </div>
-          <Link
-            href={PATH_ROOT}
-            className="text-main"
-          >
-            Return Home
-          </Link>
-        </div>
-      </div>
-    } />
+        {pathname}
+      </span>
+      {' '}
+      could not be found
+    </HttpStatusPage>
   );
 }

src/components/HttpStatusPage.tsx

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import SiteGrid from './SiteGrid';
+import { clsx } from 'clsx/lite';
+import { PATH_ROOT } from '@/site/paths';
+import Link from 'next/link';
+
+export default function HttpStatusPage({
+  status,
+  children,
+}: {
+  status: number
+  children?: ReactNode
+}) {
+  return (
+    <SiteGrid contentMain={
+      <div className={clsx(
+        'min-h-72 sm:min-h-96',
+        'flex flex-col items-center justify-center gap-3',
+      )}>
+        <h1 className={clsx(
+          'text-[100px] sm:text-[120px] leading-none',
+          'text-gray-800 dark:text-gray-200',
+        )}>
+          {status}
+        </h1>
+        <div className="flex flex-col gap-6 text-center text-dim">
+          {children &&
+            <div className="pt-1">{children}</div>}
+          <Link
+            href={PATH_ROOT}
+            className="text-main"
+          >
+            Return Home
+          </Link>
+        </div>
+      </div>
+    } />
+  );
+}