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";

type NodeDetailsProps = AppNode & {
	disabled?: boolean;
};

export function NodeDetails(props: NodeDetailsProps) {
	return (
		<div className="px-1 flex flex-col gap-2">
			<NodeDetailsImpl {...props} />
		</div>
	);
}

function NodeDetailsImpl(props: NodeDetailsProps) {
	switch (props.type) {
		case "app":
			return <NodeAppDetails {...props} />;
		case "gateway-https":
			return <NodeGatewayHttpsDetails {...props} />;
		case "gateway-tcp":
			return <NodeGatewayTCPDetails {...props} />;
		case "volume":
			return <NodeVolumeDetails {...props} />;
		case "postgresql":
			return <NodePostgreSQLDetails {...props} />;
		case "mongodb":
			return <NodeMongoDBDetails {...props} />;
		case "github":
			return <NodeGithubDetails {...props} />;
		default:
			return <>nooo</>;
	}
}