"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" 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 // import("monaco-themes/themes/Blackboard.json").then((data) => { // monaco.editor.defineTheme( // "Blackboard", // data as monaco.editor.IStandaloneThemeData // ) // }) // monaco.editor.setTheme("Blackboard") } return ( <>

index.html style.css

Preview

Node Console

) }