Skip to content

Commit 191852a

Browse files
rickhanloniignoffnoahlemenmattcarrollcodeeps1lon
authored
Add blog posts for React 19 Beta (#6778)
* Blog posts for React 19 * Feedback * Feedback * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Josh Story <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Noah Lemen <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Matt Carroll <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Matt Carroll <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Noah Lemen <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Noah Lemen <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Noah Lemen <[email protected]> * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Noah Lemen <[email protected]> * Update src/content/blog/2024/04/25/react-19.md * Update src/content/blog/2024/04/25/react-19.md Co-authored-by: Matt Carroll <[email protected]> * Thanks * Apply suggestions from code review Co-authored-by: Matt Carroll <[email protected]> Co-authored-by: Sebastian Silbermann <[email protected]> * Feedback * nit * Issue link --------- Co-authored-by: Josh Story <[email protected]> Co-authored-by: Noah Lemen <[email protected]> Co-authored-by: Matt Carroll <[email protected]> Co-authored-by: Sebastian Silbermann <[email protected]>
1 parent 4f55010 commit 191852a

13 files changed

+2092
-29
lines changed

‎src/components/MDX/ConsoleBlock.tsx

+78-3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ interface ConsoleBlockProps {
1515
children: React.ReactNode;
1616
}
1717

18+
interface ConsoleBlockMultiProps {
19+
children: React.ReactNode;
20+
}
21+
1822
const Box = ({
1923
width = '60px',
2024
height = '17px',
@@ -29,7 +33,7 @@ const Box = ({
2933
<div className={className} style={{width, height, ...customStyles}}></div>
3034
);
3135

32-
function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
36+
export function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
3337
let message: React.ReactNode | null;
3438
if (typeof children === 'string') {
3539
message = children;
@@ -38,7 +42,10 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
3842
}
3943

4044
return (
41-
<div className="mb-4 text-secondary" translate="no" dir="ltr">
45+
<div
46+
className="console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg"
47+
translate="no"
48+
dir="ltr">
4249
<div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
4350
<div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
4451
<Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
@@ -73,4 +80,72 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
7380
);
7481
}
7582

76-
export default ConsoleBlock;
83+
export function ConsoleBlockMulti({children}: ConsoleBlockMultiProps) {
84+
return (
85+
<div
86+
className="console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg"
87+
translate="no"
88+
dir="ltr">
89+
<div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
90+
<div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
91+
<Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
92+
</div>
93+
<div className="flex text-sm px-4">
94+
<div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
95+
Console
96+
</div>
97+
<div className="px-4 py-2 flex">
98+
<Box className="me-2 bg-gray-300 dark:bg-gray-70" />
99+
<Box className="me-2 hidden md:block bg-gray-300 dark:bg-gray-70" />
100+
<Box className="hidden md:block bg-gray-300 dark:bg-gray-70" />
101+
</div>
102+
</div>
103+
</div>
104+
<div className="grid grid-cols-1 divide-y divide-gray-300 dark:divide-gray-70 text-base">
105+
{children}
106+
</div>
107+
</div>
108+
);
109+
}
110+
111+
export function ConsoleLogLine({children, level}: ConsoleBlockProps) {
112+
let message: React.ReactNode | null;
113+
if (typeof children === 'string') {
114+
message = children;
115+
} else if (isValidElement(children)) {
116+
message = children.props.children;
117+
} else if (Array.isArray(children)) {
118+
message = children.reduce((result, child) => {
119+
if (typeof child === 'string') {
120+
result += child;
121+
} else if (isValidElement(child)) {
122+
// @ts-ignore
123+
result += child.props.children;
124+
}
125+
return result;
126+
}, '');
127+
}
128+
129+
return (
130+
<div
131+
className={cn(
132+
'ps-4 pe-2 pt-1 pb-2 grid grid-cols-[18px_auto] font-mono rounded-b-md',
133+
{
134+
'bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5':
135+
level === 'error',
136+
'bg-yellow-5 text-yellow-50': level === 'warning',
137+
'bg-gray-5 text-secondary dark:text-secondary-dark': level === 'info',
138+
}
139+
)}>
140+
{level === 'error' && (
141+
<IconError className="self-start mt-1.5 text-[.7rem] w-6" />
142+
)}
143+
{level === 'warning' && (
144+
<IconWarning className="self-start mt-1 text-[.65rem] w-6" />
145+
)}
146+
<div className="px-2 pt-1 whitespace-break-spaces text-code leading-tight">
147+
{message}
148+
</div>
149+
</div>
150+
);
151+
}

‎src/components/MDX/MDXComponents.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import cn from 'classnames';
88

99
import CodeBlock from './CodeBlock';
1010
import {CodeDiagram} from './CodeDiagram';
11-
import ConsoleBlock from './ConsoleBlock';
11+
import {ConsoleBlock, ConsoleLogLine, ConsoleBlockMulti} from './ConsoleBlock';
1212
import ExpandableCallout from './ExpandableCallout';
1313
import ExpandableExample from './ExpandableExample';
1414
import {H1, H2, H3, H4, H5} from './Heading';
@@ -420,6 +420,8 @@ export const MDXComponents = {
420420
pre: CodeBlock,
421421
CodeDiagram,
422422
ConsoleBlock,
423+
ConsoleBlockMulti,
424+
ConsoleLogLine,
423425
DeepDive: (props: {
424426
children: React.ReactNode;
425427
title: string;

0 commit comments

Comments
 (0)