rename methods

packages/website/src/components/ErrorWrapper/index.module.css

@@ -0,0 +1,55 @@
+.error-display {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  gap: var(--space-4);
+  padding: var(--space-4);
+  box-sizing: border-box;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100dvw;
+  height: 100dvh;
+
+  text-align: center;
+  background-color: var(--gray-1);
+
+  .info {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    gap: var(--space-3);
+  }
+
+  .error {
+    text-align: left;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+
+    max-width: min(100%, var(--page-width));
+
+    .cover {
+      position: absolute;
+      right: 0;
+      top: 0;
+
+      width: 25%;
+      height: 100%;
+
+      background: linear-gradient(90deg, transparent, var(--gray-1));
+    }
+  }
+
+  .options {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-3);
+  }
+}

packages/website/src/components/ErrorWrapper/index.tsx

@@ -0,0 +1,84 @@
+import { useState, type ReactNode } from "react";
+import {
+  ErrorBoundary,
+  getErrorMessage,
+  type FallbackProps,
+} from "react-error-boundary";
+import { discordLink } from "../../config/socials";
+import { Button } from "../Button";
+import { Code } from "../Code";
+import { Heading } from "../Heading";
+import { Link } from "../Link";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+interface Props {
+  children: ReactNode;
+}
+
+export function ErrorWrapper({ children }: Props) {
+  return (
+    <ErrorBoundary fallbackRender={(props) => <Fallback {...props} />}>
+      {children}
+    </ErrorBoundary>
+  );
+}
+
+function Fallback({ error, resetErrorBoundary }: FallbackProps) {
+  const [showError, setShowError] = useState(false);
+
+  let body: string | undefined;
+
+  if (error instanceof Error) {
+    body = error.stack || getErrorMessage(error);
+  } else {
+    body = getErrorMessage(error);
+  }
+
+  body ??= "No error message";
+
+  return (
+    <div className={styles["error-display"]}>
+      <div className={styles.info}>
+        <Heading size="3">BlitzKit crashed</Heading>
+        <Text lowContrast>Sorry about that! You have a couple of options.</Text>
+      </div>
+
+      {showError && (
+        <Code variant="solid" className={styles.error}>
+          {body}
+          <div className={styles.cover} />
+        </Code>
+      )}
+
+      <div className={styles.options}>
+        {!showError && (
+          <Button variant="outline" onClick={() => setShowError(true)}>
+            View error
+          </Button>
+        )}
+
+        {showError && (
+          <Button
+            variant="outline"
+            onClick={() => navigator.clipboard.writeText(body)}
+          >
+            Copy error
+          </Button>
+        )}
+
+        <Link href="" underline="never">
+          <Button variant="outline">Hard reload</Button>
+        </Link>
+
+        <Button variant="outline" onClick={resetErrorBoundary}>
+          Soft reset
+        </Button>
+
+        <Link href={discordLink} target="_blank" underline="never">
+          <Button>Discord server</Button>
+        </Link>
+      </div>
+    </div>
+  );
+}