platformIcon.tsx

import * as React from 'react';
import { icons, iconsLg } from './icons.generated';

export const PLATFORM_TO_ICON = {
  amazon: "amazon",
  amd: "amd",
  android: "android",
  "android-phone": "android-phone",
  "android-tablet": "android-tablet",
  anthropic: "anthropic",
  "anthropic-claude": "anthropic-claude",
  apple: "apple",
  "apple-ipad": "apple-ipad",
  "apple-iphone": "apple-iphone",
  "apple-tv": "apple-tv",
  "apple-watch": "apple-watch",
  arm: "arm",
  bazzite: "bazzite",
  bun: "bun",
  capacitor: "capacitor",
  chrome: "chrome",
  chromium: "chromium",
  clojure: "clojure",
  cloudflare: "cloudflare",
  cocoa: "apple",
  "cocoa-objc": "apple",
  "cocoa-swift": "swift",
  cohere: "cohere",
  convex: "convex",  
  cordova: "cordova",
  cpp: "cpp",
  cryengine: "cryengine",
  crystal: "crystal",
  css: "css",
  csharp: "csharp",
  "csharp-aspnetcore": "csharp",
  dart: "dart",
  deepseek: "deepseek",
  default: "default",
  deno: "deno",
  dotnet: "dotnet",
  "dotnet-aspnetcore": "dotnet",
  "dotnet-aspnet": "dotnet",
  "dotnet-awslambda": "awslambda",
  "dotnet-blazor": "blazor",
  "dotnet-csharp": "csharp",
  "dotnet-gcpfunctions": "gcp-functions",
  "dotnet-maui": "maui",
  "dotnet-uno": "uno",
  "dotnet-xamarin": "xamarin",
  dotnetcore: "dotnetcore",
  dotnetfx: "dotnetfx",
  dotnetframework: "dotnetframework",
  edge: "edge",
  "edge-legacy": "edge-legacy",
  electron: "electron",
  elixir: "elixir",
  fastmcp: "fastmcp",
  firebase: "firebase",
  firefox: "firefox",
  flutter: "flutter",
  font: "font",
  fsharp: "fsharp",
  gemini: "gemini",
  git: "git",
  go: "go",
  "go-echo": "echo",
  "go-fasthttp": "fasthttp",
  "go-fiber": "fiber",
  "go-gin": "gin",
  "go-iris": "iris",
  "go-martini": "martini",
  "go-negroni": "go",
  godot: "godot",
  google: "google",
  grok: "grok",
  groq: "groq",
  huggingface: "huggingface",
  "internet-explorer": "internet-explorer",
  java: "java",
  "java-appengine": "app-engine",
  "java-android": "android",
  "java-log4j": "java",
  "java-log4j2": "java",
  "java-logback": "logback",
  "java-logging": "java",
  "java-ray": "ray",
  "java-spring": "spring",
  "java-spring-boot": "springboot",
  javascript: "javascript",
  "javascript-alpinejs": "alpinejs",
  "javascript-analogjs": "analogjs",
  "javascript-angular": "angularjs",
  "javascript-angularjs": "angularjs",
  "javascript-astro": "astro",
  "javascript-awslambda": "awslambda",
  "javascript-azurefunctions": "azure-functions",
  "javascript-backbone": "backbone",
  "javascript-browser": "javascript",
  "javascript-capacitor": "capacitor",
  "javascript-cloudflare-pages": "cloudflare-pages",
  "javascript-cloudflare-workers": "cloudflare-workers",
  "javascript-connect": "connect",
  "javascript-cordova": "cordova",
  "javascript-effect": "effect",
  "javascript-electron": "electron",
  "javascript-ember": "ember",
  "javascript-express": "express",
  "javascript-fastify": "fastify",
  "javascript-firebase": "firebase",
  "javascript-gatsby": "gatsby",
  "javascript-gcpfunctions": "gcp-functions",
  "javascript-hapi": "hapi",
  "javascript-hono": "hono",
  "javascript-hydrogen": "hydrogen",
  "javascript-ionic": "ionic",
  "javascript-koa": "koa",
  "javascript-lit": "lit",
  "javascript-meteor": "meteor",
  "javascript-million": "million",
  "javascript-nestjs": "nestjs",
  "javascript-nextjs": "nextjs",
  "javascript-nitro": "nitro",
  "javascript-node": "nodejs",
  "javascript-nuxt": "nuxt",
  "javascript-opennext": "opennext",
  "javascript-qwik": "qwik",
  "javascript-react": "react",
  "javascript-react-router": "react-router",
  "javascript-remix": "remix",
  "javascript-serverlesscloud": "serverless",
  "javascript-solid": "solid",
  "javascript-solidstart": "solidstart",
  "javascript-svelte": "svelte",
  "javascript-sveltekit": "svelte",
  "javascript-tanstackstart-react": "tanstack",
  "javascript-vue": "vue",
  "javascript-wasm": "wasm",
  ionic: "ionic",
  kotlin: "kotlin",
  "kotlin-android": "android",
  langchain: "langchain",
  langgraph: "langgraph",
  launchdarkly: "launchdarkly",
  litellm: "litellm",
  linux: "linux",
  mastra: "mastra",
  mcp: "mcp",
  mono: "mono",
  motorola: "motorola",
  mistral: "mistral",
  native: "nativec",
  "native-qt": "qt",
  nintendo: "nintendo",
  "nintendo-switch": "nintendo-switch",
  "nintendo-switch-2": "nintendo-switch-2",
  node: "nodejs",
  nvidia: "nvidia",
  openai: "openai",
  openfeature: "openfeature",
  opera: "opera",
  perforce: "perforce",
  perl: "perl",
  perplexity: "perplexity",
  php: "php",
  playstation: "playstation",
  powershell: "powershell",
  "php-laravel": "laravel",
  "php-livewire": "livewire",
  "php-magento": "magento",
  "php-monolog": "php",
  "php-symfony2": "symfony",
  "php-symfony": "symfony",
  "pydantic-ai": "pydantic-ai",
  python: "python",
  "python-aiohttp": "aiohttp",
  "python-airflow": "apache-airflow",
  "python-ariadne": "ariadne",
  "python-asyncpg": "postgresql",
  "python-awslambda": "awslambda",
  "python-azurefunctions": "azure-functions",
  "python-beam": "apache-beam",
  "python-boto3": "aws",
  "python-bottle": "bottle",
  "python-celery": "celery",
  "python-chalice": "chalice",
  "python-clickhouse-driver": "clickhouse",
  "python-django": "django",
  "python-dramatiq": "dramatiq",
  "python-falcon": "falcon",
  "python-fastapi": "fastapi",
  "python-flask": "flask",
  "python-gcpfunctions": "gcp-functions",
  "python-gnu_backtrace": "gnu",
  "python-gql": "graphql",
  "python-graphene": "graphene",
  "python-grpc": "grpc",
  "python-httpx": "httpx",
  "python-huey": "huey",
  "python-litestar": "litestar",
  "python-loguru": "loguru",
  "python-pylons": "python",
  "python-pymongo": "mongodb",
  "python-pyramid": "pyramid",
  "python-pythonawslambda": "awslambda",
  "python-quart": "quart",
  "python-ray": "ray",
  "python-redis": "redis",
  "python-rq": "redis",
  "python-sanic": "sanic",
  "python-serverless": "serverless",
  "python-starlette": "starlette",
  "python-strawberry": "strawberry",
  "python-spark": "apache-spark",
  "python-sqlalchemy": "sqlalchemy",
  "python-tornado": "tornado",
  "python-tryton": "tryton",
  "python-typer": "typer",
  qq: "qq",
  qt: "qt",
  "react-native": "react-native",
  ruby: "ruby",
  "ruby-activeadmin": "activeadmin",
  "ruby-grape": "grape",
  "ruby-hanami": "hanami",
  "ruby-padrino": "padrino",
  "ruby-rack": "ruby",
  "ruby-rails": "rails",
  "ruby-sidekiq": "sidekiq",
  "ruby-sinatra": "sinatra",
  "ruby-trailblazer": "trailblazer",
  rust: "rust",
  "rust-actix": "actix",
  "rust-axum": "tokio",
  "rust-tower": "tower",
  "rust-tracing": "tracing",
  safari: "safari",
  samsung: "samsung",
  scala: "scala",
  steamos: "steamos",
  stride3d: "stride3d",
  supabase: "supabase",
  sql: "sql",
  sqlserver: "sqlserver",
  swift: "swift",
  tauri: "tauri",
  ubuntu: "ubuntu",
  unity: "unity",
  unleash: "unleash",
  // This will be deprecated in favor of 'unrealengine'
  ue4: "unreal",
  unreal: "unreal",
  unrealengine: "unreal",
  uwp: "windows",
  vercel: "vercel",
  visualbasic: "visual-basic",
  vscode: "vscode",
  windows: "windows",
  xbox: "xbox",
  // Don't add new platforms down here!
  // Please add them where they belong alphabetically
} as const;


function normalizePlatform(platform: string): string {
  // sentry uses format python-django, but docs uses python.django
  // this function normalizes that
  const dashedPlatform =  platform.replace(".", "-");

  // Allow `node` as an alias for `javascript` to ensure backwards compatibility
  return dashedPlatform.replace(/^node-/, 'javascript-')
}

function getIcon(platform: string): Platform {
  const normalizedPlatform = normalizePlatform(platform) as keyof typeof PLATFORM_TO_ICON;
  const icon = PLATFORM_TO_ICON[normalizedPlatform];

  if (icon) {
    return icon;
  }

  if (normalizedPlatform.includes("-")) {
    return getLanguageIcon(normalizedPlatform);
  }

  return "default";
}

function getLanguageIcon(platform: string): Platform {
  const [language] = normalizePlatform(platform).split("-");

  return getIcon(language);
}

type Platform = (typeof PLATFORM_TO_ICON)[keyof typeof PLATFORM_TO_ICON];

type Props = React.HTMLAttributes<HTMLDivElement | HTMLImageElement> & {
  platform: string;
  size?: string | number;
  format?: "sm" | "lg";
  radius?: number | null;
  withLanguageIcon?: boolean;
  languageIconStyles?: React.CSSProperties;
  /** Accessible label for the icon. Defaults to the platform name. Pass an empty string to mark the icon as decorative. */
  alt?: string;
};

const PlatformIcon = ({
  platform,
  size = 20,
  format = "sm",
  radius = 3,
  withLanguageIcon,
  languageIconStyles = {},
  style = {},
  alt = platform,
  ...otherProps
}: Props) => {
  const icon = getIcon(platform);
  const iconMap = format === "lg" ? iconsLg : icons;
  const iconPath = iconMap[icon] ?? iconMap["default"];

  const languageIcon = getLanguageIcon(platform);
  const languageIconPath = icons[languageIcon] ?? icons["default"];

  if (withLanguageIcon && languageIcon !== icon && languageIcon !== "default") {
    return (
      <div
        role="img"
        aria-label={alt}
        {...otherProps}
        style={{ position: "relative", ...style }}
      >
        <img
          src={iconPath}
          width={size}
          height={size}
          alt=""
          style={{ borderRadius: `${radius}px` }}
        />
        <img
          src={languageIconPath}
          alt=""
          style={{
            position: "absolute",
            bottom: "-1px",
            right: "-1px",
            height: "30%",
            width: "30%",
            borderRadius: "2px",
            ...languageIconStyles,
          }}
        />
      </div>
    );
  }

  return (
    <img
      src={iconPath}
      width={size}
      height={size}
      alt={alt}
      {...otherProps}
      style={{ borderRadius: `${radius}px`, ...style }}
    />
  );
};

export default PlatformIcon;