spb/llmindex Public

1/**2 * llmindex.io — provider brand logo with monogram fallback3 * Author:  Simon-Pierre Boucher4 * Contact: contact@spboucher.ai5 * License: Proprietary — © Simon-Pierre Boucher, all rights reserved6 *7 * Brand glyphs come from the Simple Icons CDN (tiny SVGs, brand colors).8 * Providers without a glyph — or any load failure — fall back to a colored9 * monogram chip, so the UI never shows a broken image.10 */11'use client';1213import { useState, type ReactElement } from 'react';1415interface Brand {16  slug?: string;17  color: string; // hex without '#'18  label: string;19}2021const BRANDS: Record<string, Brand> = {22  anthropic: { slug: 'claude', color: 'D97757', label: 'A' },23  openai: { slug: 'openai', color: '111111', label: 'O' },24  google: { slug: 'googlegemini', color: '4796E3', label: 'G' },25  'x-ai': { slug: 'xai', color: '111111', label: 'X' },26  deepseek: { slug: 'deepseek', color: '4D6BFE', label: 'D' },27  qwen: { slug: 'qwen', color: '615CED', label: 'Q' },28  'meta-llama': { slug: 'meta', color: '0467DF', label: 'M' },29  mistralai: { slug: 'mistralai', color: 'FA520F', label: 'M' },30  moonshotai: { slug: 'moonshotai', color: '16181C', label: 'K' },31  'z-ai': { slug: 'zai', color: '1F2937', label: 'Z' },32  minimax: { slug: 'minimax', color: 'FF4040', label: 'MM' },33  nvidia: { slug: 'nvidia', color: '76B900', label: 'N' },34  amazon: { slug: 'amazonwebservices', color: 'FF9900', label: 'A' },35  cohere: { slug: 'cohere', color: 'D18EE2', label: 'C' },36};3738export function ProviderLogo({39  provider,40  size = 18,41}: {42  provider: string;43  size?: number;44}): ReactElement {45  const [failed, setFailed] = useState(false);46  const brand = BRANDS[provider] ?? {47    color: '52525B',48    label: (provider[0] ?? '?').toUpperCase(),49  };5051  if (failed || !brand.slug) {52    return (53      <span54        aria-hidden="true"55        title={provider}56        className="inline-flex shrink-0 items-center justify-center rounded-md font-bold"57        style={{58          width: size,59          height: size,60          fontSize: Math.max(8, size * 0.45),61          color: `#${brand.color}`,62          backgroundColor: `#${brand.color}22`,63          border: `1px solid #${brand.color}44`,64        }}65      >66        {brand.label}67      </span>68    );69  }7071  return (72    // eslint-disable-next-line @next/next/no-img-element -- tiny external brand SVG; next/image adds no value and can't optimize SVGs73    <img74      src={`https://cdn.simpleicons.org/${brand.slug}/${brand.color}`}75      alt={`${provider} logo`}76      title={provider}77      width={size}78      height={size}79      loading="lazy"80      className="shrink-0"81      onError={() => setFailed(true)}82    />83  );84}85