"use client" import Editor, { OnMount } from "@monaco-editor/react" import monaco from "monaco-editor" import { useRef, useState } from "react" import theme from "./theme.json" import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "@/components/ui/resizable" import { Button } from "../ui/button" import { ChevronLeft, ChevronRight, RotateCcw, RotateCw, Terminal, TerminalSquare, X, } from "lucide-react" import Tab from "../ui/tab" import Sidebar from "./sidebar" import { useClerk } from "@clerk/nextjs" export default function CodeEditor() { const editorRef = useRef(null) const [code, setCode] = useState([ { language: "css", name: "style.css", value: `body { background-color: #282c34; color: white; }`, }, { language: "html", name: "index.html", value: `

Hello, world!

`, }, { language: "javascript", name: "script.js", value: `console.log("Hello, world!")`, }, ]) // const handleEditorMount: OnMount = (editor, monaco) => { // editorRef.current = editor // } const clerk = useClerk() return ( <>

index.html style.css

{clerk.loaded ? ( ) : null}

Preview

Node Console

) }