Canvas: build application infrastructure with drag and drop
Change-Id: I5cfd12e67794f3376c5c025af29470d52d77cf16
diff --git a/apps/canvas/src/Canvas.tsx b/apps/canvas/src/Canvas.tsx
new file mode 100644
index 0000000..effdac3
--- /dev/null
+++ b/apps/canvas/src/Canvas.tsx
@@ -0,0 +1,38 @@
+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>
+ )
+}