apps/canvas/front/src/components/icon.tsx

import { ReactElement } from "react";
import { SiGithub, SiMongodb, SiPostgresql } from "react-icons/si";
import { GrServices } from "react-icons/gr";
import { GoFileDirectoryFill } from "react-icons/go";
import { TbWorldWww } from "react-icons/tb";
import { PiNetwork } from "react-icons/pi";
import { AiOutlineGlobal } from "react-icons/ai";
import { Bot } from "lucide-react";
import { Terminal } from "lucide-react";
import { AppNode, Access } from "config";

type Props = {
	node: AppNode | undefined;
	className?: string;
};

export function Icon({ node, className }: Props): ReactElement {
	if (!node) {
		return <></>;
	}
	switch (node.type) {
		case "app":
			if (node.data.type === "sketch:latest") {
				return <Bot className={className} />;
			} else {
				return <GrServices className={className} />;
			}
		case "github":
			return <SiGithub className={className} />;
		case "gateway-https":
			return <TbWorldWww className={className} />;
		case "gateway-tcp":
			return <PiNetwork className={className} />;
		case "mongodb":
			return <SiMongodb className={className} />;
		case "postgresql":
			return <SiPostgresql className={className} />;
		case "volume":
			return <GoFileDirectoryFill className={className} />;
		case "network":
			return <AiOutlineGlobal className={className} />;
		default:
			throw new Error(`MUST NOT REACH! ${node.type}`);
	}
}

export function AccessType({ access, className }: { access: Access; className?: string }) {
	switch (access.type) {
		case "https":
			if (access.agentName) {
				return <Bot className={className} />;
			} else {
				return <TbWorldWww className={className} />;
			}
		case "ssh":
			return <Terminal className={className} />;
		case "tcp":
		case "udp":
			return <PiNetwork className={className} />;
		case "postgresql":
			return <SiPostgresql className={className} />;
		case "mongodb":
			return <SiMongodb className={className} />;
	}
}