import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
/* eslint-disable */
import React from "react";
import { Box, Heading, Text, Button, Center } from "@chakra-ui/react";
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        // Define a state variable to track whether is an error or not
        this.state = { hasError: false };
    }
    static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI
        return { hasError: true };
    }
    componentDidCatch(error, errorInfo) {
        // You can use your own error logging service here
        console.log({ error, errorInfo });
    }
    render() {
        // Check if the error is thrown
        // @ts-ignore
        if (this.state.hasError) {
            // You can render any custom fallback UI
            return (_jsx(Center, Object.assign({ h: "100vh", background: "linear-gradient(to right, #c9d6ff, #e2e2e2);" }, { children: _jsxs(Box, Object.assign({ textAlign: "center", py: 10, px: 6 }, { children: [_jsx(Heading, Object.assign({ display: "inline-block", as: "h2", size: "2xl" }, { children: "500" })), _jsx(Text, Object.assign({ fontSize: "18px", mt: 3, mb: 2 }, { children: "Oops! Something went wrong." })), _jsx(Text, Object.assign({ color: "gray.500", mb: 6 }, { children: "The page seems not working as expected. Please retry again." })), _jsx(Button, Object.assign({ colorScheme: "teal", bgGradient: "linear(to-r, teal.400, teal.500, teal.600)", color: "white", variant: "solid", onClick: () => this.setState({ hasError: false }) }, { children: "Retry" }))] })) })));
        }
        // Return children components in case of no error
        // @ts-ignore
        return this.props.children;
    }
}
export default ErrorBoundary;
//# sourceMappingURL=ErrorBoundary.js.map