apps/canvas/src/Canvas.tsx

import { Resources } from "@/components/resources";
import { Canvas } from "@/components/canvas";
import { Details } from "@/components/details";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './components/ui/resizable';
import { Tools } from "./Tootls";

export function CanvasBuilder() {
    return (
        <ResizablePanelGroup
            direction="horizontal"
            style={{ width: "100vw", height: "calc(100vh - 100px)" }}
        >
            <ResizablePanel defaultSize={80}>
                <ResizablePanelGroup direction="vertical">
                    <ResizablePanel defaultSize={80}>
                        <ResizablePanelGroup direction="horizontal">
                            <ResizablePanel defaultSize={15}>
                                <Resources />
                            </ResizablePanel>
                            <ResizableHandle withHandle />
                            <ResizablePanel defaultSize={85}>
                                <Canvas />
                            </ResizablePanel>
                        </ResizablePanelGroup>
                    </ResizablePanel>
                    <ResizableHandle withHandle />
                    <ResizablePanel defaultSize={20}>
                        <Tools />
                    </ResizablePanel>
                </ResizablePanelGroup>
            </ResizablePanel>
            <ResizableHandle withHandle />
            <ResizablePanel defaultSize={20}>
                <Details />
            </ResizablePanel>
        </ResizablePanelGroup>
    )
}