feat: add a customized ErrorBoundaryFallback

1 files changed, 27 insertions, 0 deletions

diff --git a/src/components/ErrorBoundaryFallback.js b/src/components/ErrorBoundaryFallback.js
new file mode 100644
index 0000000..5f15f4f
--- /dev/null
+++ b/src/components/ErrorBoundaryFallback.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import Icon from 'c/Icon';
+import yacd from 's/yacd.svg';
+import github from 's/github.svg';
+
+import s0 from './ErrorBoundaryFallback.module.scss';
+const yacdRepoIssueUrl = 'https://github.com/haishanh/yacd/issues';
+
+function ErrorBoundaryFallback() {
+  return (
+    <div className={s0.root}>
+      <div className={s0.yacd}>
+        <Icon id={yacd.id} width={150} height={150} />
+      </div>
+      <h1>Oops, something went wrong!</h1>
+      <p>
+        If you think this is a bug, reporting this at{' '}
+        <a className={s0.link} href={yacdRepoIssueUrl}>
+          <Icon id={github.id} width={16} height={16} />
+          haishanh/yacd
+        </a>
+      </p>
+    </div>
+  );
+}
+
+export default ErrorBoundaryFallback;