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

import { NodeAppDetails } from "./node-app";
import { NodeGatewayHttpsDetails } from "./node-gateway-https";
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";
import { NodeDetailsProps } from "@/lib/types";
import { cn } from "@/lib/utils";

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

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