apps/canvas/front/src/components/node-details.tsx

import { NodeAppDetails } from "./node-app";
import { NodeGatewayHttpsDetails } from "./node-gateway-https";
import { AppNode } from "@/lib/state";
import { NodeVolumeDetails } from "./node-volume";
import { NodePostgreSQLDetails } from "./node-postgresql";
import { NodeMongoDBDetails } from "./node-mongodb";
import { NodeGithubDetails } from "./node-github";
import { NodeGatewayTCPDetails } from "./node-gateway-tcp";

export function NodeDetails({ node, disabled }: { node: AppNode; disabled?: boolean }) {
	return (
		<div className="px-1 flex flex-col gap-2">
			<NodeDetailsImpl node={node} disabled={disabled} />
		</div>
	);
}

function NodeDetailsImpl({ node, disabled }: { node: AppNode; disabled?: boolean }) {
	switch (node.type) {
		case "app":
			return <NodeAppDetails node={node} disabled={disabled} />;
		case "gateway-https":
			return <NodeGatewayHttpsDetails node={node} disabled={disabled} />;
		case "gateway-tcp":
			return <NodeGatewayTCPDetails node={node} disabled={disabled} />;
		case "volume":
			return <NodeVolumeDetails node={node} disabled={disabled} />;
		case "postgresql":
			return <NodePostgreSQLDetails node={node} disabled={disabled} />;
		case "mongodb":
			return <NodeMongoDBDetails node={node} disabled={disabled} />;
		case "github":
			return <NodeGithubDetails node={node} disabled={disabled} />;
		default:
			return <>nooo</>;
	}
}