diff --git a/website/src/components/CodeExample.tsx b/website/src/components/CodeExample.tsx index 2d204b9..ab9e108 100644 --- a/website/src/components/CodeExample.tsx +++ b/website/src/components/CodeExample.tsx @@ -1,7 +1,7 @@ 'use client'; -import { useEffect, useRef } from 'react'; -import * as monaco from 'monaco-editor'; +import { useRef } from 'react'; +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(null); - - useEffect(() => { - if (editorRef.current) { - const editor = monaco.editor.create(editorRef.current, { - value: exampleCode, - language: 'typescript', - theme: 'vs-dark', - minimap: { enabled: false }, - readOnly: true, - automaticLayout: true, - fontSize: 14, - lineNumbers: 'on', - scrollBeyondLastLine: false, - roundedSelection: false, - padding: { top: 16, bottom: 16 }, - }); - - return () => editor.dispose(); - } - }, []); - - return
; + return ( +
+ +
+ ); }