Canvas: Improve layout
Change-Id: Ife4f14d23eefc0ef0cb6b189446590fc42b8d797
diff --git a/apps/canvas/front/src/Config.tsx b/apps/canvas/front/src/Config.tsx
index df03746..7a93634 100644
--- a/apps/canvas/front/src/Config.tsx
+++ b/apps/canvas/front/src/Config.tsx
@@ -2,6 +2,8 @@
import { AppNode, useEnv, useProjectId } from "./lib/state";
import { generateDodoConfig } from "./lib/config";
import { useEffect, useMemo, useState } from "react";
+import { Card, CardContent } from "./components/ui/card";
+import JSONView from "@microlink/react-json-view";
export function Config() {
const env = useEnv();
@@ -14,11 +16,21 @@
setNodes(n);
}
}, [n, setNodes]);
- const config = useMemo(() => generateDodoConfig(projectId, nodes, env), [projectId, nodes, env]);
- const configS = useMemo(() => JSON.stringify(config, undefined, 4), [config]);
+ const config = useMemo(() => generateDodoConfig(projectId, nodes, env) || {}, [projectId, nodes, env]);
return (
- <div className="px-5">
- <pre>{configS}</pre>
- </div>
+ <Card className="h-full flex flex-col">
+ <CardContent className="flex-1 min-h-0 p-4">
+ <div className="h-full p-4 bg-muted rounded-lg overflow-auto">
+ <JSONView
+ src={config as object}
+ theme="rjv-default"
+ name={false}
+ displayDataTypes={false}
+ enableClipboard={true}
+ style={{ fontFamily: "JetBrains Mono" }}
+ />
+ </div>
+ </CardContent>
+ </Card>
);
}