File size: 1,895 Bytes
cce8120 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | #!/usr/bin/env bash
set -euo pipefail
mkdir -p components/editor
cat > components/editor/ProductionCodeEditor.jsx <<'EOC'
"use client";
import Editor from "@monaco-editor/react";
export default function ProductionCodeEditor({
language = "typescript",
value = "",
onChange
}) {
return (
<Editor
height="100%"
defaultLanguage={language}
value={value}
theme="vs-dark"
onChange={onChange}
options={{
automaticLayout: true,
minimap: { enabled: true },
fontSize: 14,
smoothScrolling: true,
cursorBlinking: "smooth",
scrollBeyondLastLine: false,
wordWrap: "on",
tabSize: 2
}}
/>
);
}
EOC
cat > components/editor/EditorToolbar.jsx <<'EOC'
"use client";
export default function EditorToolbar() {
return (
<div className="flex h-12 items-center justify-between border-b border-slate-800 bg-slate-950 px-4">
<div className="font-semibold text-sky-400">
Dolor3V Studio
</div>
<div className="flex gap-2">
<button className="rounded bg-sky-600 px-3 py-1 text-white">
Save
</button>
<button className="rounded bg-emerald-600 px-3 py-1 text-white">
Run
</button>
<button className="rounded bg-purple-600 px-3 py-1 text-white">
Build
</button>
</div>
</div>
);
}
EOC
cat > components/editor/index.js <<'EOC'
export { default as ProductionCodeEditor } from "./ProductionCodeEditor";
export { default as EditorToolbar } from "./EditorToolbar";
EOC
echo "[1/5] Installing Monaco..."
npm install @monaco-editor/react monaco-editor
echo "[2/5] Verifying..."
test -f components/editor/ProductionCodeEditor.jsx
test -f components/editor/EditorToolbar.jsx
test -f components/editor/index.js
echo "[3/5] Complete."
echo "Production Monaco workspace installed."
|