feat: Add Monaco Editor component for code example

website/src/app/page.tsx

@@ -1,4 +1,10 @@
 import styles from "./page.module.css";
+import dynamic from 'next/dynamic';
+
+const CodeExample = dynamic(
+  () => import('../components/CodeExample'),
+  { ssr: false }
+);
 
 export default function Home() {
     return (
@@ -20,34 +26,7 @@ export default function Home() {
                         </p>
                     </div>
                     <div>
-                        <code className={styles.code}>
+                        <CodeExample />
-                            <pre className={styles.codeBlock}>
-{`\
-import { Client, type Context } from 'unicord';
-
-// Initialize and configure
-const client = new Client({
-    token: '<token>',
-    application_id: '<application_id>',
-    intents: [
-        Intent.GUILDS,
-        Intent.GUILD_MESSAGES,
-        Intent.GUILD_MESSAGE_REACTIONS,
-        Intent.MESSAGE_CONTENT
-    ],
-    prefix: '??'
-});
-
-// Register a command
-client.chatCommands.register('ping', (context: Context, args) => {
-    context.reply('Pong!', true);
-});
-
-// Connect
-client.connect();
-`}
-                            </pre>
-                        </code>
                     </div>
                 </div>
 

website/src/components/CodeExample.module.css

@@ -0,0 +1,8 @@
+.editorContainer {
+    width: 100%;
+    height: 400px;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 20px 0;
+    border: 1px solid #2d2d2d;
+}

website/src/components/CodeExample.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import * as monaco from 'monaco-editor';
+import styles from './CodeExample.module.css';
+
+const exampleCode = `\
+import { Client, type Context } from 'unicord';
+
+// Initialize and configure
+const client = new Client({
+    token: '<token>',
+    application_id: '<application_id>',
+    intents: [
+        Intent.GUILDS,
+        Intent.GUILD_MESSAGES,
+        Intent.GUILD_MESSAGE_REACTIONS,
+        Intent.MESSAGE_CONTENT
+    ],
+    prefix: '??'
+});
+
+// Register a command
+client.chatCommands.register('ping', (context: Context, args) => {
+    context.reply('Pong!', true);
+});
+
+// Connect
+client.connect();`;
+
+export default function CodeExample() {
+    const editorRef = useRef<HTMLDivElement>(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 <div className={styles.editorContainer} ref={editorRef} />;
+}