ErrorBoundary: add error boundary to IconGrid

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,26 @@
+import React, { ErrorInfo } from "react";
+
+interface ErrorBoundaryProps {
+  fallback?: JSX.Element;
+}
+
+export default class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
+  state = { errorMessage: "" };
+
+  static getDerivedStateFromError(error: any) {
+    return { errorMessage: error.toString() };
+  }
+
+  componentDidCatch(error: any, info: ErrorInfo) {
+    console.error(error);
+    console.info(info);
+  }
+
+  render() {
+    if (this.state.errorMessage) {
+      return this.props.fallback ?? <p>{this.state.errorMessage}</p>;
+    }
+
+    return this.props.children;
+  }
+}

src/components/IconGrid/IconGrid.css

@@ -52,7 +52,7 @@
   width: 100%;
   height: 0px;
   margin: 0px;
-  padding-right: 10%;
+  /* padding-right: 10%; */
   border-radius: 16px;
   overflow: hidden;
 }
@@ -110,6 +110,16 @@
   height: 48px;
 }
 
+.close {
+  width: 10%;
+  text-align: end;
+}
+
+.close-icon {
+  margin: 24px;
+  cursor: pointer;
+}
+
 .empty-list {
   display: flex;
   flex-direction: column;

src/components/IconGrid/IconGridItem.tsx

@@ -11,6 +11,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import { iconPreviewOpenAtom } from "../../state/atoms";
 import { IconProps, Icon } from "phosphor-react";
 import InfoPanel from "./InfoPanel";
+import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
 
 interface IconGridItemProps extends IconProps {
   index: number;
@@ -100,7 +101,9 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
         <p>{name}</p>
       </motion.div>
       <AnimatePresence initial={false}>
+        <ErrorBoundary fallback={<p>NOOOOOO</p>}>
         {isOpen && <InfoPanel {...props} />}
+        </ErrorBoundary>
       </AnimatePresence>
     </>
   );