feat: Migrate CodeExample to @monaco-editor/react for Turbopack compatibility

website/src/components/CodeExample.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
-import * as monaco from 'monaco-editor';
+import Editor from "@monaco-editor/react";
 import styles from './CodeExample.module.css';
 
 const exampleCode = `\
@@ -29,27 +29,24 @@ client.chatCommands.register('ping', (context: Context, args) => {
 client.connect();`;
 
 export default function CodeExample() {
-    const editorRef = useRef<HTMLDivElement>(null);
+    return (
-
+        <div className={styles.editorContainer}>
-    useEffect(() => {
+            <Editor
-        if (editorRef.current) {
+                height="400px"
-            const editor = monaco.editor.create(editorRef.current, {
+                defaultLanguage="typescript"
-                value: exampleCode,
+                defaultValue={exampleCode}
-                language: 'typescript',
+                theme="vs-dark"
-                theme: 'vs-dark',
+                options={{
-                minimap: { enabled: false },
+                    readOnly: true,
-                readOnly: true,
+                    minimap: { enabled: false },
-                automaticLayout: true,
+                    fontSize: 14,
-                fontSize: 14,
+                    lineNumbers: 'on',
-                lineNumbers: 'on',
+                    scrollBeyondLastLine: false,
-                scrollBeyondLastLine: false,
+                    roundedSelection: false,
-                roundedSelection: false,
+                    padding: { top: 16, bottom: 16 },
-                padding: { top: 16, bottom: 16 },
+                    automaticLayout: true,
-            });
+                }}
-
+            />
-            return () => editor.dispose();
+        </div>
-        }
+    );
-    }, []);
-
-    return <div className={styles.editorContainer} ref={editorRef} />;
 }