next
Version:
The React Framework
9 lines (8 loc) • 3.83 kB
TypeScript
import { type StackFrame } from '../../../shared/stack-frame';
type CodeFrameProps = {
stackFrame: StackFrame;
codeFrame: string;
};
export declare function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps): import("react").JSX.Element;
export declare const CODE_FRAME_STYLES = "\n [data-nextjs-codeframe] {\n --code-frame-padding: 12px;\n --code-frame-line-height: var(--size-20);\n background-color: var(--color-background-200);\n color: var(--color-gray-1000);\n text-overflow: ellipsis;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n font-family: var(--font-stack-monospace);\n font-size: var(--size-13);\n line-height: var(--code-frame-line-height);\n margin: 0;\n overflow: hidden;\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n }\n\n .code-frame-link,\n .code-frame-pre {\n padding: var(--code-frame-padding);\n }\n\n .code-frame-pre {\n background: var(--color-background-100) !important;\n border: 1px solid var(--color-gray-200);\n border-radius: var(--rounded-xl);\n border-bottom: none;\n margin-left: -1px !important;\n width: calc(100% + 2px);\n max-width: calc(100% + 2px) !important;\n }\n\n .code-frame-link svg {\n display: block;\n flex-shrink: 0;\n }\n\n [data-with-open-in-editor-link-source-file] svg {\n width: var(--size-14);\n height: var(--size-14);\n }\n\n .code-frame-lines {\n min-width: max-content;\n }\n\n .code-frame-link [data-text] {\n font-size: var(--size-12);\n text-align: left;\n }\n\n .code-frame-header {\n width: 100%;\n transition: background 100ms ease-out;\n border-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n }\n\n [data-with-open-in-editor-link-source-file] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-24);\n height: var(--size-24);\n padding: 4px;\n margin-left: auto;\n border-radius: var(--rounded-full);\n\n &:focus-visible {\n outline: var(--focus-ring);\n outline-offset: -2px;\n }\n\n &:hover {\n background: var(--color-gray-alpha-100);\n }\n\n &:active {\n background: var(--color-gray-alpha-200);\n }\n }\n\n [data-nextjs-codeframe]::selection,\n [data-nextjs-codeframe] *::selection {\n background-color: var(--color-ansi-selection);\n }\n\n [data-nextjs-codeframe] *:not(a) {\n color: inherit;\n background-color: transparent;\n font-family: var(--font-stack-monospace);\n }\n\n [data-nextjs-codeframe-line][data-nextjs-codeframe-line--errored=\"true\"] {\n position: relative;\n isolation: isolate;\n\n > span { \n position: relative;\n z-index: 1;\n }\n\n &::after {\n content: \"\";\n width: calc(100% + var(--code-frame-padding) * 2);\n height: var(--code-frame-line-height);\n left: calc(-1 * var(--code-frame-padding));\n background: var(--color-red-200);\n box-shadow: 2px 0 0 0 var(--color-red-900) inset;\n position: absolute;\n }\n }\n\n [data-nextjs-codeframe-line] > span:first-child {\n color: var(--color-gray-alpha-500) !important;\n }\n\n [data-nextjs-codeframe-line][data-nextjs-codeframe-line--errored=\"true\"]\n > span:first-child {\n color: var(--color-gray-alpha-1000) !important;\n }\n\n\n [data-nextjs-codeframe] > * {\n margin: 0;\n }\n\n .code-frame-link {\n display: flex;\n align-items: center;\n gap: 6px;\n margin: 0;\n outline: 0;\n padding-top: 8px;\n padding-bottom: 8px;\n padding-right: 8px;\n }\n .code-frame-pre {\n overflow-x: auto;\n overflow-y: hidden;\n display: block;\n max-width: 100%;\n }\n\n [data-nextjs-codeframe] svg {\n color: var(--color-gray-900);\n }\n";
export {};