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 && } +
);