docs: add global-error.tsx

omnifed · Oct 3, 2024 · aa3bed5 · aa3bed5
1 parent 9f8248d
commit aa3bed5
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 2 deletions.
diff --git a/docs/app/components/icons/broken-bone-icon.tsx b/docs/app/components/icons/broken-bone-icon.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react'
+
+export default function BrokenBoneIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M6.283 19.233c-.164.496-.47.9-.852 1.176m0 0a2.11 2.11 0 0 1-1.954.293c-1.149-.407-1.754-1.724-1.353-2.942c.308-.935 1.12-1.54 2.001-1.586c.449-.023.92-.233 1.06-.66L6.674 11L8 13l2-1l-1.508 4.732c-.131.411.103.843.433 1.122c.696.591.999 1.605.685 2.557c-.401 1.218-1.658 1.875-2.806 1.469c-.68-.241-1.17-.801-1.373-1.471M18.544 5.324c.454-.25.958-.342 1.438-.291m0 0c.698.074 1.346.447 1.718 1.064c.63 1.042.236 2.386-.878 3.001c-.87.48-1.922.375-2.641-.19c-.342-.269-.818-.41-1.195-.193L13 11V9l-2-1.02l4.115-2.272c.397-.22.513-.73.449-1.18c-.124-.86.307-1.754 1.157-2.223c1.114-.616 2.528-.27 3.157.773c.372.617.386 1.34.104 1.955M7 8H5m4-2V4m4 12v2m2-4h2"
+        color="currentColor"
+      ></path>
+    </svg>
+  )
+}
diff --git a/docs/app/global-error.tsx b/docs/app/global-error.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { vstack } from '@cerberus-design/styled-system/patterns'
+import { css } from '@cerberus-design/styled-system/css'
+import { Button } from '@cerberus-design/react'
+import BrokenBoneIcon from './components/icons/broken-bone-icon'
+
+// Error boundaries must be Client Components
+
+export default function GlobalError({
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  // global-error must include html and body tags
+  return (
+    <html>
+      <body>
+        <div
+          className={vstack({
+            justify: 'center',
+            h: '100dvh',
+            pxi: '6',
+            textAlign: 'center',
+          })}
+        >
+          <span
+            className={css({
+              color: 'page.surface.100',
+              maxW: '12rem',
+              mb: 6,
+              w: '1/3',
+              lg: {
+                mb: 10,
+              },
+            })}
+          >
+            <BrokenBoneIcon />
+          </span>
+
+          <h2
+            className={css({
+              textStyle: 'h1',
+            })}
+          >
+            Cerb your enthusiasm!
+          </h2>
+          <p
+            className={css({
+              color: 'page.text.100',
+              maxW: '66ch',
+              pb: 8,
+              textWrap: 'pretty',
+            })}
+          >
+            Something went wrong. Cerberus has sounded the alarm and our demons
+            are ready for action.
+          </p>
+
+          <Button onClick={() => reset()}>Try again</Button>
+        </div>
+      </body>
+    </html>
+  )
+}
diff --git a/docs/app/not-found.tsx b/docs/app/not-found.tsx
@@ -17,8 +17,8 @@ export default function NotFound() {
       <span
         className={css({
           color: 'page.surface.100',
-          mb: 6,
           maxW: '12rem',
+          mb: 6,
           w: '1/3',
           lg: {
             mb: 10,
@@ -47,7 +47,7 @@ export default function NotFound() {
       </p>
 
       <Link className={button()} href="/">
-        Return from when you came
+        Return from whence you came
       </Link>
     </div>
   )