75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
|
|
"use client";
|
|
import { useEditorStore, FileTab } from "../store/editor-zustand";
|
|
|
|
function StudioSidebar() {
|
|
const files = useEditorStore((s: any) => s.files);
|
|
const openFile = useEditorStore((s: any) => s.openFile);
|
|
const activeTabId = useEditorStore((s: any) => s.activeTabId);
|
|
// Split files into mockup sections
|
|
const foundationFiles = files.filter((f: FileTab) => f.name === "auth.ts" || f.name === "passport.ts" || f.name === "security.ts");
|
|
const corporationFiles = files.filter((f: FileTab) => f.name === "terminal.ts" || f.name === "deployment.ts" || f.name === "analytics.ts");
|
|
const labsFiles = files.filter((f: FileTab) => f.name === "copilot.ts" || f.name === "nexus-v2.ts" || f.name === "experimental.ts");
|
|
return (
|
|
<div className="sidebar">
|
|
<div className="sidebar-section">
|
|
<div className="sidebar-header foundation">
|
|
<span>🔴</span>
|
|
<span>Foundation APIs</span>
|
|
</div>
|
|
<div className="file-tree">
|
|
{foundationFiles.map((file: FileTab) => (
|
|
<div
|
|
key={file.id}
|
|
className={"file-item" + (activeTabId === file.id ? " active" : "")}
|
|
onClick={() => openFile(file)}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<span className="file-icon">📄</span>
|
|
<span>{file.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="sidebar-section">
|
|
<div className="sidebar-header corporation">
|
|
<span>🔵</span>
|
|
<span>Corporation Services</span>
|
|
</div>
|
|
<div className="file-tree">
|
|
{corporationFiles.map((file: FileTab) => (
|
|
<div
|
|
key={file.id}
|
|
className={"file-item" + (activeTabId === file.id ? " active" : "")}
|
|
onClick={() => openFile(file)}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<span className="file-icon">📄</span>
|
|
<span>{file.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="sidebar-section">
|
|
<div className="sidebar-header labs">
|
|
<span>🟡</span>
|
|
<span>Labs Experimental</span>
|
|
</div>
|
|
<div className="file-tree">
|
|
{labsFiles.map((file: FileTab) => (
|
|
<div
|
|
key={file.id}
|
|
className={"file-item" + (activeTabId === file.id ? " active" : "")}
|
|
onClick={() => openFile(file)}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<span className="file-icon">📄</span>
|
|
<span>{file.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
export default StudioSidebar;
|