File size: 2,303 Bytes
c2c8c8d | 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 | import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import Sidebar from './Sidebar';
import MultiFileEditor from '@/components/editor/MultiFileEditor';
import LivePreview from '@/components/preview/LivePreview';
import TerminalPanel from '@/components/terminal/TerminalPanel';
import AIChatPanel from '@/components/ai/AIChatPanel';
import { useEnvStore } from '@/stores/envStore';
interface PanelLayoutProps {
layout: 'editor' | 'split' | 'preview';
}
function ResizeHandle({ direction = 'vertical' }: { direction?: 'vertical' | 'horizontal' }) {
return (
<PanelResizeHandle
className={`group relative ${direction === 'vertical' ? 'w-1 hover:w-1.5' : 'h-1 hover:h-1.5'} bg-border/50 hover:bg-primary/30 transition-all`}
>
<div className={`absolute ${direction === 'vertical' ? 'inset-y-0 -left-0.5 -right-0.5' : 'inset-x-0 -top-0.5 -bottom-0.5'}`} />
</PanelResizeHandle>
);
}
export default function PanelLayout({ layout }: PanelLayoutProps) {
const environment = useEnvStore((s) => s.environment);
const renderSecondaryPanel = () => {
if (environment === 'java' || environment === 'python') {
return <TerminalPanel />;
}
return <LivePreview />;
};
return (
<PanelGroup direction="horizontal" className="flex-1 min-h-0">
{/* Left: Sidebar */}
<Panel defaultSize={18} minSize={10} maxSize={25} collapsible>
<Sidebar />
</Panel>
<ResizeHandle direction="vertical" />
{/* Center: Editor + Preview */}
<Panel defaultSize={52} minSize={30} className="flex flex-col overflow-hidden">
{layout === 'editor' && <MultiFileEditor />}
{layout === 'preview' && renderSecondaryPanel()}
{layout === 'split' && (
<PanelGroup direction="horizontal">
<Panel defaultSize={50}>
<MultiFileEditor />
</Panel>
<ResizeHandle direction="vertical" />
<Panel defaultSize={50}>
{renderSecondaryPanel()}
</Panel>
</PanelGroup>
)}
</Panel>
<ResizeHandle direction="vertical" />
{/* Right: AI Chat */}
<Panel defaultSize={30} minSize={20} maxSize={40} collapsible>
<AIChatPanel />
</Panel>
</PanelGroup>
);
}
|