rasengan
Version:
The modern React Framework
105 lines (104 loc) • 4.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { isRouteErrorResponse, Link, useParams, useRouteError, } from 'react-router';
/**
* Error boundary component that will be displayed if an error occurs during a routing
* @returns
*/
export function ErrorBoundary() {
let error = useRouteError();
if (isRouteErrorResponse(error)) {
return (_jsxs(_Fragment, { children: [_jsx("p", { children: "Hello Error" }), _jsxs("h1", { children: [error.status, " ", error.statusText] }), _jsx("p", { children: error.data })] }));
}
else if (error instanceof Error) {
return (_jsxs("div", { style: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'start',
alignItems: 'start',
height: '100vh',
width: 'calc(100vw - 40px)',
padding: 20,
}, children: [_jsx("h1", { style: {
fontSize: '1.4rem',
fontWeight: 'bold',
marginBottom: 5,
}, children: "Application Error" }), _jsx("p", { style: {
fontSize: '1rem',
marginBottom: 10,
}, children: error.message }), _jsxs("div", { style: {
marginTop: 20,
overflow: 'auto',
width: 'calc(100% - 80px)',
maxHeight: 'calc(100vh - 100px)',
padding: '10px 20px',
borderRadius: 10,
backgroundColor: '#f5f5f5',
}, children: [_jsx("p", { style: {
fontWeight: 'bold',
fontSize: '1.2rem',
color: '#000',
}, children: "The stack trace is:" }), _jsx("pre", { style: {
whiteSpace: 'pre-wrap',
wordWrap: 'break-word',
fontSize: '1rem',
color: '#ff000055',
}, children: error.stack })] })] }));
}
else {
return _jsx("h1", { children: "Unknown Error" });
}
}
/**
* Page component that defines title and description to a page
*/
export const RasenganPageComponent = ({ page: Page, data, }) => {
// Get the page props
const props = data.props ?? {};
// get params
const params = useParams();
const pageProps = {
...props,
params,
};
return _jsx(Page, { ...pageProps });
};
/**
* Component that will be displayed when a page is not found
* @returns React.ReactNode
*/
export const NotFoundPageComponent = () => {
return (_jsxs("section", { style: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
width: '100vw',
}, children: [_jsx("h1", { style: {
fontSize: '3rem',
fontWeight: 'bold',
marginBottom: 10,
}, children: "404 Page Not Found" }), _jsx("p", { style: {
fontSize: '1.2rem',
marginBottom: 20,
}, children: "The page you are looking for does not exist or has been moved." }), _jsx(Link, { to: "/", style: {
fontSize: '1.2rem',
fontWeight: 800,
marginBottom: 20,
textDecoration: 'none',
}, children: "Go back to home page" })] }));
};
/**
* Custom Link Component
* @param props
* @returns React.ReactNode
*/
export const CustomLink = (props) => {
const { to, children, ...rest } = props;
if (typeof to === 'string') {
const splitted = to.split('#');
if (splitted.length > 1)
return (_jsx("a", { href: to, ...rest, children: children }));
}
return (_jsx(Link, { to: to, ...rest, children: children }));
};