@@ -7,11 +7,15 @@ import pkg from '@uiw/react-layout/package.json';
7
7
// import Codepen from '@uiw/react-codepen';
8
8
import CodeSandbox from '@uiw/react-codesandbox' ;
9
9
import rehypeIgnore from 'rehype-ignore' ;
10
+ import { Fragment } from 'react' ;
10
11
import '@wcj/dark-mode' ;
11
12
import styles from './App.module.less' ;
12
13
import logo from './logo.svg' ;
13
14
import Footer from './Footer' ;
14
- import { Fragment } from 'react' ;
15
+
16
+ const Preview = CodeLayout . Preview ;
17
+ const Code = CodeLayout . Code ;
18
+ const Toolbar = CodeLayout . Toolbar ;
15
19
16
20
// @ts -ignore
17
21
const version = VERSION ;
@@ -100,27 +104,30 @@ export default function App() {
100
104
} ,
101
105
} ,
102
106
} ;
103
-
107
+ const extra = (
108
+ < Fragment >
109
+ { /* <Codepen {...codePenOption}>
110
+ <svg viewBox="0 0 1024 1024" width="18" height="18" fill="currentColor">
111
+ <path
112
+ d="M123.428571 668l344.571429 229.714286v-205.142857L277.142857 565.142857z m-35.428571-82.285714l110.285714-73.714286-110.285714-73.714286v147.428572z m468 312l344.571429-229.714286-153.714286-102.857143-190.857143 127.428572v205.142857z m-44-281.714286l155.428571-104-155.428571-104-155.428571 104zM277.142857 458.857143l190.857143-127.428572V126.285714L123.428571 356z m548.571429 53.142857l110.285714 73.714286V438.285714z m-78.857143-53.142857l153.714286-102.857143-344.571429-229.714286v205.142857z m277.142857-102.857143v312q0 23.428571-19.428571 36.571429l-468 312q-12 7.428571-24.571429 7.428571t-24.571429-7.428571L19.428571 704.571429q-19.428571-13.142857-19.428571-36.571429V356q0-23.428571 19.428571-36.571429L487.428571 7.428571q12-7.428571 24.571429-7.428571t24.571429 7.428571l468 312q19.428571 13.142857 19.428571 36.571429z"
113
+ p-id="2071"
114
+ />
115
+ </svg>
116
+ </Codepen> */ }
117
+ < CodeSandbox { ...codeSandboxOption } > Open in CodeSandbox</ CodeSandbox >
118
+ </ Fragment >
119
+ ) ;
104
120
return (
105
- < CodeLayout
106
- toolbar = { param . title || 'Example' }
107
- code = { < code { ...rest } /> }
108
- text = { code }
109
- toolbarExtra = {
110
- < Fragment >
111
- { /* <Codepen {...codePenOption}>
112
- <svg viewBox="0 0 1024 1024" width="18" height="18" fill="currentColor">
113
- <path
114
- d="M123.428571 668l344.571429 229.714286v-205.142857L277.142857 565.142857z m-35.428571-82.285714l110.285714-73.714286-110.285714-73.714286v147.428572z m468 312l344.571429-229.714286-153.714286-102.857143-190.857143 127.428572v205.142857z m-44-281.714286l155.428571-104-155.428571-104-155.428571 104zM277.142857 458.857143l190.857143-127.428572V126.285714L123.428571 356z m548.571429 53.142857l110.285714 73.714286V438.285714z m-78.857143-53.142857l153.714286-102.857143-344.571429-229.714286v205.142857z m277.142857-102.857143v312q0 23.428571-19.428571 36.571429l-468 312q-12 7.428571-24.571429 7.428571t-24.571429-7.428571L19.428571 704.571429q-19.428571-13.142857-19.428571-36.571429V356q0-23.428571 19.428571-36.571429L487.428571 7.428571q12-7.428571 24.571429-7.428571t24.571429 7.428571l468 312q19.428571 13.142857 19.428571 36.571429z"
115
- p-id="2071"
116
- />
117
- </svg>
118
- </Codepen> */ }
119
- < CodeSandbox { ...codeSandboxOption } > Open in CodeSandbox</ CodeSandbox >
120
- </ Fragment >
121
- }
122
- >
123
- < Child />
121
+ < CodeLayout disableCheckered style = { { marginBottom : 18 } } >
122
+ < Preview >
123
+ < Child />
124
+ </ Preview >
125
+ < Toolbar extra = { extra } text = { code } >
126
+ { param . title || 'Example' }
127
+ </ Toolbar >
128
+ < Code >
129
+ < pre { ...rest } />
130
+ </ Code >
124
131
</ CodeLayout >
125
132
) ;
126
133
}
0 commit comments