next
Version:
The React Framework
132 lines (131 loc) • 4.28 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
export const errorStyles = {
container: {
fontFamily: 'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
card: {
marginTop: '-32px',
maxWidth: '325px',
padding: '32px 28px',
textAlign: 'left'
},
icon: {
marginBottom: '24px'
},
title: {
fontSize: '24px',
fontWeight: 500,
letterSpacing: '-0.02em',
lineHeight: '32px',
margin: '0 0 12px 0',
color: 'var(--next-error-title)'
},
message: {
fontSize: '14px',
fontWeight: 400,
lineHeight: '21px',
margin: '0 0 20px 0',
color: 'var(--next-error-message)'
},
form: {
margin: 0
},
buttonGroup: {
display: 'flex',
gap: '8px',
alignItems: 'center'
},
button: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
height: '32px',
padding: '0 12px',
fontSize: '14px',
fontWeight: 500,
lineHeight: '20px',
borderRadius: '6px',
cursor: 'pointer',
color: 'var(--next-error-btn-text)',
background: 'var(--next-error-btn-bg)',
border: 'var(--next-error-btn-border)'
},
buttonSecondary: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
height: '32px',
padding: '0 12px',
fontSize: '14px',
fontWeight: 500,
lineHeight: '20px',
borderRadius: '6px',
cursor: 'pointer',
color: 'var(--next-error-btn-secondary-text)',
background: 'var(--next-error-btn-secondary-bg)',
border: 'var(--next-error-btn-secondary-border)'
},
digestFooter: {
position: 'fixed',
bottom: '32px',
left: '0',
right: '0',
textAlign: 'center',
fontFamily: 'ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace',
fontSize: '12px',
lineHeight: '18px',
fontWeight: 400,
margin: '0',
color: 'var(--next-error-digest)'
}
};
export const errorThemeCss = `
:root {
--next-error-bg: #fff;
--next-error-text: #171717;
--next-error-title: #171717;
--next-error-message: #171717;
--next-error-digest: #666666;
--next-error-btn-text: #fff;
--next-error-btn-bg: #171717;
--next-error-btn-border: none;
--next-error-btn-secondary-text: #171717;
--next-error-btn-secondary-bg: transparent;
--next-error-btn-secondary-border: 1px solid rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: dark) {
:root {
--next-error-bg: #0a0a0a;
--next-error-text: #ededed;
--next-error-title: #ededed;
--next-error-message: #ededed;
--next-error-digest: #a0a0a0;
--next-error-btn-text: #0a0a0a;
--next-error-btn-bg: #ededed;
--next-error-btn-border: none;
--next-error-btn-secondary-text: #ededed;
--next-error-btn-secondary-bg: transparent;
--next-error-btn-secondary-border: 1px solid rgba(255,255,255,0.14);
}
}
body { margin: 0; color: var(--next-error-text); background: var(--next-error-bg); }
`.replace(/\n\s*/g, '');
export function WarningIcon() {
return /*#__PURE__*/ _jsx("svg", {
width: "32",
height: "32",
viewBox: "-0.2 -1.5 32 32",
fill: "none",
style: errorStyles.icon,
children: /*#__PURE__*/ _jsx("path", {
d: "M16.9328 0C18.0839 0.000116771 19.1334 0.658832 19.634 1.69531L31.4299 26.1309C32.0708 27.4588 31.1036 28.9999 29.6291 29H2.00215C0.527541 29 -0.439628 27.4588 0.201371 26.1309L11.9973 1.69531C12.4979 0.658823 13.5474 7.75066e-05 14.6984 0H16.9328ZM3.59493 26H28.0363L16.9328 3H14.6984L3.59493 26ZM15.8156 19C16.9202 19.0001 17.8156 19.8955 17.8156 21C17.8156 22.1045 16.9202 22.9999 15.8156 23C14.7111 23 13.8156 22.1046 13.8156 21C13.8156 19.8954 14.7111 19 15.8156 19ZM17.3156 16.5H14.3156V8.5H17.3156V16.5Z",
fill: "var(--next-error-title)"
})
});
}
//# sourceMappingURL=error-styles.js.map