40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import Editor, { type OnValidate } from "@monaco-editor/react";
|
|
import { useState } from "react";
|
|
|
|
import type { MockFileNode } from "@/pages/workspace/mock-data";
|
|
|
|
interface EditorPanelProps {
|
|
file?: MockFileNode;
|
|
}
|
|
|
|
export function EditorPanel({ file }: EditorPanelProps) {
|
|
const [, setMarkers] = useState<Parameters<OnValidate>[0]>([]);
|
|
|
|
if (!file || file.kind !== "file") {
|
|
return (
|
|
<section className="flex h-full w-full items-center justify-center bg-background text-sm text-muted-foreground">
|
|
<div className="text-center">
|
|
<p>No file selected</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="h-full w-full overflow-hidden bg-background">
|
|
<Editor
|
|
key={file.path}
|
|
theme="vs-dark"
|
|
language={file.language ?? "typescript"}
|
|
value={file.content ?? ""}
|
|
onValidate={setMarkers}
|
|
options={{
|
|
automaticLayout: true,
|
|
minimap: { enabled: false },
|
|
readOnly: false,
|
|
}}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|