Add custom error page for client-side exceptions

app/global-error.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import HttpStatusPage from '@/components/HttpStatusPage';
+import { TbRefresh } from 'react-icons/tb';
+
+export default function GlobalError() {
+  return (
+    <HttpStatusPage status={<TbRefresh />}>
+      Something went wrong
+    </HttpStatusPage>
+  );
+}

app/not-found.tsx

@@ -10,7 +10,7 @@ export default function NotFound() {
   return (
     <HttpStatusPage status={404}>
       <span className={clsx(
-        'underline underline-offset-2 decoration-dotted',
+        'underline underline-offset-4 decoration-dotted',
         'cursor-not-allowed',
       )}>
         {pathname}

src/components/HttpStatusPage.tsx

@@ -8,7 +8,7 @@ export default function HttpStatusPage({
   status,
   children,
 }: {
-  status: number
+  status: ReactNode
   children?: ReactNode
 }) {
   return (