51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
"use client";
|
||
import { useEditorStore } from "../store/editor-zustand";
|
||
|
||
function StudioEditor() {
|
||
const openTabs = useEditorStore((s) => s.openTabs);
|
||
const activeTabId = useEditorStore((s) => s.activeTabId);
|
||
const setActiveTab = useEditorStore((s) => s.setActiveTab);
|
||
const closeTab = useEditorStore((s) => s.closeTab);
|
||
// Find active file
|
||
const activeFile = openTabs.find(f => f.id === activeTabId);
|
||
return (
|
||
<div className="editor-area">
|
||
<div className="editor-tabs">
|
||
{openTabs.length === 0 && (
|
||
<div className="editor-tab empty">No files open</div>
|
||
)}
|
||
{openTabs.map((file) => (
|
||
<div
|
||
key={file.id}
|
||
className={"editor-tab" + (activeTabId === file.id ? " active" : "")}
|
||
onClick={() => setActiveTab(file.id)}
|
||
style={{ cursor: "pointer" }}
|
||
>
|
||
<span>📄</span>
|
||
<span>{file.name}</span>
|
||
<span
|
||
className="close-btn"
|
||
style={{ marginLeft: 8, color: "#888", cursor: "pointer" }}
|
||
onClick={e => { e.stopPropagation(); closeTab(file.id); }}
|
||
>×</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="editor-content">
|
||
{activeFile ? (
|
||
activeFile.content.split("\n").map((line, i) => (
|
||
<div className="code-line" key={i}>
|
||
<div className="line-number">{i + 1}</div>
|
||
<div className="line-content">{line}</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div style={{ color: "#888", padding: 32, textAlign: "center" }}>
|
||
No file open. Select a file to begin.
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
export default StudioEditor;
|