rasengan
Version:
The modern React Framework
132 lines (131 loc) • 4.89 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() {
const { DEV } = import.meta.env;
console.log(import.meta.env);
let error = useRouteError();
if (!DEV)
return (_jsx("section", { style: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 100,
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
width: '100vw',
gap: 10,
backgroundColor: '#fff',
}, children: _jsx("p", { style: {
fontSize: '18px',
}, children: "Application Error" }) }));
if (isRouteErrorResponse(error)) {
return (_jsxs(_Fragment, { children: [_jsx("p", { children: "Application Error" }), _jsxs("h1", { children: [error.status, " ", error.statusText] }), _jsx("p", { children: error.data })] }));
}
else if (error instanceof Error) {
return (_jsxs("div", { style: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 100,
display: 'flex',
flexDirection: 'column',
justifyContent: 'start',
alignItems: 'start',
height: '100vh',
width: '100vw',
padding: 20,
backgroundColor: '#fff',
}, 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: '100%',
maxHeight: '100vh',
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: '#ff0000aa',
}, 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: 'row',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
width: '100vw',
gap: 10,
}, children: [_jsx("h1", { style: {
fontSize: '18px',
fontWeight: 'normal',
}, children: "404" }), _jsx("span", { style: {
height: '20px',
borderRightWidth: '1px',
borderRightStyle: 'solid',
borderRightColor: '#ccc',
} }), _jsx("p", { style: {
fontSize: '18px',
}, children: "Page not found" })] }));
};
/**
* 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 }));
};