fix(deps): update dependency react-code-preview-layout to v3 #217

Author: jaywcjlove

website/package.json

@@ -15,7 +15,7 @@
     "@uiw/reset.css": "~1.0.5",
     "@wcj/dark-mode": "~1.0.9",
     "react": "~18.2.0",
-    "react-code-preview-layout": "~2.1.0",
+    "react-code-preview-layout": "^3.0.0",
     "react-dom": "~18.2.0",
     "react-router-dom": "^6.8.1"
   },

website/src/preview/index.tsx

@@ -45,22 +45,20 @@ export const Preview = () => {
             if (metaId && typeof Child === 'function') {
               const code = MDStr.data[metaId].value || '';
               const param = getURLParameters(metaData);
+              const disablePreview = getBooleanValue(param, 'disablePreview', false);
               return (
-                <CodeLayout
-                  disableCheckered={getBooleanValue(param, 'disableCheckered', true)}
-                  disableToolbar={getBooleanValue(param, 'disableToolbar', false)}
-                  disableCode={getBooleanValue(param, 'disableCode', false)}
-                  disablePreview={getBooleanValue(param, 'disablePreview', false)}
-                  bordered={getBooleanValue(param, 'bordered', true)}
-                  copied={getBooleanValue(param, 'copied', true)}
-                  background={param.background}
-                  toolbar={param.title || '示例'}
-                  codeProps={{ style: { padding: 0 } }}
-                  style={{ padding: 0 }}
-                  code={<pre {...(props as React.HTMLAttributes<HTMLPreElement>)} />}
-                  text={code}
-                >
-                  <Child />
+                <CodeLayout bordered={getBooleanValue(param, 'bordered', true)} style={{ marginBottom: '16px' }}>
+                  {!disablePreview && (
+                    <CodeLayout.Preview style={{ background: param.background }}>
+                      <Child />
+                    </CodeLayout.Preview>
+                  )}
+                  <CodeLayout.Toolbar copied={getBooleanValue(param, 'copied', true)} text={code}>
+                    {param.title || 'Example'}
+                  </CodeLayout.Toolbar>
+                  <CodeLayout.Code style={{ padding: 0 }}>
+                    <pre {...(props as React.HTMLAttributes<HTMLPreElement>)} />
+                  </CodeLayout.Code>
                 </CodeLayout>
               );
             }