spb/polyllm

1import * as React from "react";2import { Badge } from "@/components/ui/badge";3import type { Lifecycle, ModelBadge, ModelBadgeKind } from "@/lib/models/badges";4import { cn } from "@/lib/utils";56/**7 * Presentational badge chips — no hooks, no store — so server components (public /models,8 * /compare pages) and client components share one look.9 */10const KIND_VARIANT: Record<ModelBadgeKind, "accent" | "default" | "outline" | "success" | "info"> = {11  new: "accent",12  reasoning: "default",13  vision: "default",14  coding: "default",15  fast: "outline",16  cheap: "success",17  "long-context": "info",18};1920export function BadgeChips({ badges, max = 4, className, size = "sm" }: { badges: ModelBadge[]; max?: number; className?: string; size?: "xs" | "sm" }) {21  const shown = badges.slice(0, max);22  if (!shown.length) return null;23  return (24    <span className={cn("inline-flex flex-wrap items-center gap-1", className)}>25      {shown.map((b) => (26        <Badge key={b.kind} variant={KIND_VARIANT[b.kind]} title={b.title} className={cn("font-mono tracking-wide", size === "xs" ? "px-1.5 py-0 text-[9.5px] leading-[14px]" : "text-[10px] leading-[15px]")}>27          {b.label}28        </Badge>29      ))}30      {badges.length > max ? <span className="text-[10px] text-fg-subtle">+{badges.length - max}</span> : null}31    </span>32  );33}3435export function LifecycleChip({ lifecycle, className }: { lifecycle: Lifecycle; className?: string }) {36  return (37    <Badge variant={lifecycle.tone} title={lifecycle.detail} className={className}>38      {lifecycle.label}39    </Badge>40  );41}42