ironmount/app/client/components/volume-icon.tsx

import { Cloud, Database, Folder, Server, Share2 } from "lucide-react";
import type { BackendType } from "~/schemas/volumes";

type VolumeIconProps = {
	backend: BackendType;
	size?: number;
};

const getIconAndColor = (backend: BackendType) => {
	switch (backend) {
		case "directory":
			return {
				icon: Folder,
				color: "text-blue-600 dark:text-blue-400",
				label: "Directory",
			};
		case "nfs":
			return {
				icon: Server,
				color: "text-orange-600 dark:text-orange-400",
				label: "NFS",
			};
		case "smb":
			return {
				icon: Share2,
				color: "text-purple-600 dark:text-purple-400",
				label: "SMB",
			};
		case "webdav":
			return {
				icon: Cloud,
				color: "text-green-600 dark:text-green-400",
				label: "WebDAV",
			};
		case "mariadb":
			return {
				icon: Database,
				color: "text-teal-600 dark:text-teal-400",
				label: "MariaDB",
			};
		case "mysql":
			return {
				icon: Database,
				color: "text-cyan-600 dark:text-cyan-400",
				label: "MySQL",
			};
		case "postgres":
			return {
				icon: Database,
				color: "text-indigo-600 dark:text-indigo-400",
				label: "PostgreSQL",
			};
		default:
			return {
				icon: Folder,
				color: "text-gray-600 dark:text-gray-400",
				label: "Unknown",
			};
	}
};

export const VolumeIcon = ({ backend, size = 10 }: VolumeIconProps) => {
	const { icon: Icon, label } = getIconAndColor(backend);

	return (
		<span className={`flex items-center gap-2 rounded-md px-2 py-1`}>
			<Icon size={size} />
			{label}
		</span>
	);
};