Refactor BackendBadge component

webui/src/components/BackendBadge.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Badge } from "@/components/ui/badge";
 import { BackendType, type BackendTypeValue } from "@/types/instance";
-import { Cpu, Zap, Server } from "lucide-react";
+import { Server } from "lucide-react";
 
 interface BackendBadgeProps {
   backend?: BackendTypeValue;
@@ -12,19 +12,6 @@ const BackendBadge: React.FC<BackendBadgeProps> = ({ backend }) => {
     return null;
   }
 
-  const getIcon = () => {
-    switch (backend) {
-      case BackendType.LLAMA_CPP:
-        return <Cpu className="h-3 w-3" />;
-      case BackendType.MLX_LM:
-        return <Zap className="h-3 w-3" />;
-      case BackendType.VLLM:
-        return <Server className="h-3 w-3" />;
-      default:
-        return <Server className="h-3 w-3" />;
-    }
-  };
-
   const getText = () => {
     switch (backend) {
       case BackendType.LLAMA_CPP:
@@ -38,25 +25,25 @@ const BackendBadge: React.FC<BackendBadgeProps> = ({ backend }) => {
     }
   };
 
-  const getVariant = () => {
+  const getColorClasses = () => {
     switch (backend) {
       case BackendType.LLAMA_CPP:
-        return "secondary";
+        return "bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900 dark:text-blue-200 dark:border-blue-800";
       case BackendType.MLX_LM:
-        return "outline";
+        return "bg-green-100 text-green-800 border-green-200 dark:bg-green-900 dark:text-green-200 dark:border-green-800";
       case BackendType.VLLM:
-        return "default";
+        return "bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-900 dark:text-purple-200 dark:border-purple-800";
       default:
-        return "secondary";
+        return "bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-800";
     }
   };
 
   return (
     <Badge
-      variant={getVariant()}
-      className="flex items-center gap-1.5"
+      variant="outline"
+      className={`flex items-center gap-1.5 ${getColorClasses()}`}
     >
-      {getIcon()}
+      <Server className="h-3 w-3" />
       <span className="text-xs">{getText()}</span>
     </Badge>
   );