import { Cpu } from "lucide-react";
export interface ProviderIconProps {
provider: string;
size?: "sm" | "md" | "lg";
}
const sizeMap = {
sm: 16,
md: 20,
lg: 24,
};
// Anthropic "A" logo from SimpleIcons
function AnthropicIcon({ size, color }: { size: number; color: string }) {
return (
);
}
// OpenAI flower logo from Iconify/SimpleIcons
function OpenAIIcon({ size, color }: { size: number; color: string }) {
return (
);
}
// Google Gemini sparkle logo from SimpleIcons
function GeminiIcon({ size, color }: { size: number; color: string }) {
return (
);
}
// Ollama llama head logo from SimpleIcons
function OllamaIcon({ size, color }: { size: number; color: string }) {
return (
);
}
const providerConfig: Record<
string,
{ component: typeof AnthropicIcon; color: string }
> = {
anthropic: { component: AnthropicIcon, color: "#d4a27f" }, // warm tan
openai: { component: OpenAIIcon, color: "#10a37f" }, // green
"openai-codex": { component: OpenAIIcon, color: "#10a37f" }, // green (same as openai)
google: { component: GeminiIcon, color: "#4285f4" }, // blue
gemini: { component: GeminiIcon, color: "#4285f4" }, // blue (same as google)
ollama: { component: OllamaIcon, color: "#fff" }, // white
};
export function ProviderIcon({ provider, size = "sm" }: ProviderIconProps) {
const normalizedProvider = provider.toLowerCase();
const config = providerConfig[normalizedProvider];
const IconComponent = config?.component;
const color = config?.color ?? "var(--text-muted)";
const iconSize = sizeMap[size];
return (
{IconComponent ? (
) : (
)}
);
}