81 lines
3.9 KiB
TypeScript
81 lines
3.9 KiB
TypeScript
"use client";
|
|
import StudioSidebar from "./StudioSidebar";
|
|
import StudioEditor from "./StudioEditor";
|
|
import StudioRightPanel from "./StudioRightPanel";
|
|
import StudioBottomPanel from "./StudioBottomPanel";
|
|
import StudioNetworkViz from "./StudioNetworkViz";
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
export default function StudioLayout({ children }: { children?: React.ReactNode }) {
|
|
const [platform, setPlatform] = useState("Roblox");
|
|
const [actionsOpen, setActionsOpen] = useState(false);
|
|
|
|
const handlePlatformChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
setPlatform(e.target.value);
|
|
toast.success(`Platform changed to ${e.target.value}`);
|
|
};
|
|
|
|
const handleAction = (action: string) => {
|
|
toast.info(`${action} action triggered!`);
|
|
setActionsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className="ide-container">
|
|
{/* Title Bar */}
|
|
<div className="title-bar" style={{ position: 'relative', zIndex: 10 }}>
|
|
<div className="flex items-center w-full gap-4">
|
|
<div className="logo-small">AETHEX STUDIO</div>
|
|
<div className="project-name">Project: <span>AeThex Terminal</span></div>
|
|
<div className="flex items-center gap-3 ml-6">
|
|
<span className="text-xs">Platform:</span>
|
|
<select
|
|
className="bg-[#22242A] text-xs px-3 py-1 rounded border border-blue-500 focus:ring-2 focus:ring-blue-400"
|
|
value={platform}
|
|
onChange={handlePlatformChange}
|
|
>
|
|
<option>Roblox</option>
|
|
<option>Web</option>
|
|
<option>Mobile</option>
|
|
<option>Desktop</option>
|
|
</select>
|
|
</div>
|
|
<div className="group relative">
|
|
<button
|
|
className="px-3 py-1 text-xs bg-gray-700 rounded hover:bg-gray-800 flex items-center gap-1"
|
|
tabIndex={0}
|
|
aria-label="Actions"
|
|
onClick={() => setActionsOpen((v) => !v)}
|
|
>
|
|
<span>Actions</span>
|
|
<svg className="w-3 h-3 ml-1" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" /></svg>
|
|
</button>
|
|
{actionsOpen && (
|
|
<div className="absolute right-0 mt-2 w-32 bg-[#23272F] border border-border rounded shadow-lg z-50">
|
|
<button className="block w-full text-left px-4 py-2 text-xs hover:bg-blue-600" onClick={() => handleAction('Save')}>Save</button>
|
|
<button className="block w-full text-left px-4 py-2 text-xs hover:bg-green-600" onClick={() => handleAction('Run')}>Run</button>
|
|
<button className="block w-full text-left px-4 py-2 text-xs hover:bg-gray-600" onClick={() => handleAction('Export')}>Export</button>
|
|
<button className="block w-full text-left px-4 py-2 text-xs hover:bg-gray-600" onClick={() => handleAction('Settings')}>Settings</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* Legend */}
|
|
<div className="flex items-center gap-4 ml-auto">
|
|
<span className="flex items-center gap-1 text-xs"><span className="w-2 h-2 rounded-full bg-red-500 inline-block"></span> Foundation</span>
|
|
<span className="flex items-center gap-1 text-xs"><span className="w-2 h-2 rounded-full bg-blue-500 inline-block"></span> Corporation</span>
|
|
<span className="flex items-center gap-1 text-xs"><span className="w-2 h-2 rounded-full bg-yellow-400 inline-block"></span> Labs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="main-content">
|
|
<div className="sidebar"><StudioSidebar /></div>
|
|
<div className="editor-area"><StudioEditor /></div>
|
|
<div className="right-panel"><StudioRightPanel /></div>
|
|
</div>
|
|
<div className="bottom-panel"><StudioBottomPanel /></div>
|
|
<div className="network-viz"><StudioNetworkViz /></div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|