Mathis/llamactl
1
0
Fork 0
mirror of https://github.com/lordmathis/llamactl.git synced 2025-11-06 09:04:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor BackendBadge component

Browse Source
This commit is contained in:
Matúš Námešný
2025-09-23 19:20:53 +02:00
parent 9c3da55c5d
commit 850cf018e3
1 changed files with 9 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
webui/src/components/BackendBadge.tsx
View File

@@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { BackendType, type BackendTypeValue } from "@/types/instance"; import { BackendType, type BackendTypeValue } from "@/types/instance";
import { Cpu, Zap, Server } from "lucide-react"; import { Server } from "lucide-react";
interface BackendBadgeProps { interface BackendBadgeProps {
backend?: BackendTypeValue; backend?: BackendTypeValue;
@@ -12,19 +12,6 @@ const BackendBadge: React.FC<BackendBadgeProps> = ({ backend }) => {
return null; 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 = () => { const getText = () => {
switch (backend) { switch (backend) {
case BackendType.LLAMA_CPP: case BackendType.LLAMA_CPP:
@@ -38,25 +25,25 @@ const BackendBadge: React.FC<BackendBadgeProps> = ({ backend }) => {
} }
}; };
const getVariant = () => { const getColorClasses = () => {
switch (backend) { switch (backend) {
case BackendType.LLAMA_CPP: 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: 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: 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: 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 ( return (
<Badge <Badge
variant={getVariant()} variant="outline"
className="flex items-center gap-1.5" className={`flex items-center gap-1.5 ${getColorClasses()}`}
> >
{getIcon()} <Server className="h-3 w-3" />
<span className="text-xs">{getText()}</span> <span className="text-xs">{getText()}</span>
</Badge> </Badge>
); );