webstie: update dependency react-code-preview-layout to v3 #9

Author: jaywcjlove

www/package.json

@@ -29,7 +29,7 @@
     "@wcj/dark-mode": "~1.0.12",
     "markdown-react-code-preview-loader": "^2.1.2",
     "react": "~18.2.0",
-    "react-code-preview-layout": "^2.0.5",
+    "react-code-preview-layout": "^3.0.0",
     "react-dom": "~18.2.0",
     "react-router-dom": "^6.3.0",
     "styled-components": "^5.3.5"

www/src/Document.tsx

@@ -3,6 +3,10 @@ import CodeLayout from 'react-code-preview-layout';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
 
+const Preview = CodeLayout.Preview;
+const Code = CodeLayout.Code;
+const Toolbar = CodeLayout.Toolbar;
+
 export const Document = () => (
   <MarkdownPreview
     disableCopy={true}
@@ -20,13 +24,12 @@ export const Document = () => (
           const code = data.data[metaId].value || '';
           const param = getURLParameters(meta);
           return (
-            <CodeLayout
-              disableCheckered
-              toolbar={param.title || 'Example Preview'}
-              code={<code {...rest} />}
-              text={code}
-            >
-              <Child />
+            <CodeLayout>
+              <Preview>
+                <Child />
+              </Preview>
+              <Toolbar>{param.title || 'Example Preview'}</Toolbar>
+              <Code>{code}</Code>
             </CodeLayout>
           );
         }