| import { DialogHeader } from '../../dialog/dialog-header' | |
| type ErrorOverlayDialogHeaderProps = { | |
| children?: React.ReactNode | |
| } | |
| export function ErrorOverlayDialogHeader({ | |
| children, | |
| }: ErrorOverlayDialogHeaderProps) { | |
| return ( | |
| <DialogHeader className="nextjs-container-errors-header"> | |
| {children} | |
| </DialogHeader> | |
| ) | |
| } | |
| export const DIALOG_HEADER_STYLES = ` | |
| .nextjs-container-errors-header { | |
| position: relative; | |
| } | |
| .nextjs-container-errors-header > h1 { | |
| font-size: var(--size-20); | |
| line-height: var(--size-24); | |
| font-weight: bold; | |
| margin: calc(16px * 1.5) 0; | |
| color: var(--color-title-h1); | |
| } | |
| .nextjs-container-errors-header small { | |
| font-size: var(--size-14); | |
| color: var(--color-accents-1); | |
| margin-left: 16px; | |
| } | |
| .nextjs-container-errors-header small > span { | |
| font-family: var(--font-stack-monospace); | |
| } | |
| .nextjs-container-errors-header > div > small { | |
| margin: 0; | |
| margin-top: 4px; | |
| } | |
| .nextjs-container-errors-header > p > a { | |
| color: inherit; | |
| font-weight: bold; | |
| } | |
| .nextjs-container-errors-header | |
| > .nextjs-container-build-error-version-status { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| } | |
| ` | |