Canvas: build application infrastructure with drag and drop
Change-Id: I5cfd12e67794f3376c5c025af29470d52d77cf16
diff --git a/apps/canvas/src/App.tsx b/apps/canvas/src/App.tsx
new file mode 100644
index 0000000..62652f6
--- /dev/null
+++ b/apps/canvas/src/App.tsx
@@ -0,0 +1,40 @@
+import { ReactFlowProvider } from '@xyflow/react';
+import './App.css';
+import { CanvasBuilder } from './Canvas';
+import { Tabs, TabsTrigger, TabsContent, TabsList } from './components/ui/tabs';
+import { Config } from './Config';
+import { useStateStore } from './lib/state';
+import { useEffect } from 'react';
+import { Toaster } from './components/ui/toaster';
+import { Header } from './Header';
+
+export default function App() {
+ return (
+ <ReactFlowProvider>
+ <Header />
+ <AppImpl />
+ <Toaster />
+ </ReactFlowProvider>
+ )
+}
+
+function AppImpl() {
+ const store = useStateStore();
+ useEffect(() => {
+ setTimeout(async () => await store.refreshEnv(), 1);
+ }, [store])
+ return (
+ <Tabs defaultValue="canvas">
+ <TabsList>
+ <TabsTrigger value="canvas">Canvas</TabsTrigger>
+ <TabsTrigger value="config">Config</TabsTrigger>
+ </TabsList>
+ <TabsContent value="canvas">
+ <CanvasBuilder />
+ </TabsContent>
+ <TabsContent value="config">
+ <Config />
+ </TabsContent>
+ </Tabs>
+ );
+}