diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx
new file mode 100644
index 0000000..cb09123
--- /dev/null
+++ b/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 {
+ 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 ?? {this.state.errorMessage}
;
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index 9a52800..28b10bd 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/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;
diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx
index 32efca3..8b3c019 100644
--- a/src/components/IconGrid/IconGridItem.tsx
+++ b/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 = (props) => {
{name}
+ NOOOOOO
}>
{isOpen && }
+
>
);