Function Card

packages/website/src/components/Card.tsx:19–118

({
  className,
  children,
  description,
  icon,
  lang,
  name,
  slug,
  small,
  stars,
  style,
  updated_at,
  url,
})

  breathing?: boolean;
  mentionHtml?: string;
  children?: React.ReactNode;
};

/**
 * A catalog entry, rendered as a GlassCard.
 *
 * The one thing the library cannot know is the software's own brand color, so
 * the icon tile — and only the icon tile — is tinted from the simple-icons hex.
 * Everything else (chrome, halo, hover lift) is left to performative-ui, which
 * keeps 250+ cards on the same surface treatment as the rest of the page.
 */
const Card: React.FC<CardProps> = ({
  className,
  children,
  description,
  icon,
  lang,
  name,
  slug,
  small,
  stars,
  style,
  updated_at,
  url,
  breathing,
  mentionHtml,
}) => {
  // `logoFromIcon` yields the icon record, an empty string, or null depending
  // on which of the three lookups hit. Normalise once, here.
  const resolved = logoFromIcon({ slug, icon });
  const logo = resolved && typeof resolved === "object" ? resolved : null;

  return (
    <div
      // `small` cards live in dense grids (the related rail, the alternatives
      // list). The catalog's min-widths are what forced those into one
      // full-width card per row.
      className={`relative w-full ${
        small ? "min-w-0" : "min-w-56 md:min-w-72 lg:min-w-96"
      } ${className ?? ""}`}
      style={style}
    >
      {children}
      <GlassCard
        breathing={breathing}
        glowOnHover
        className={`h-full ${small ? "!p-4" : ""}`}
        style={
          {
            // Bleed the brand color into the card's own halo.
            ...(logo?.hex &&
              logo.hex !== "currentColor" && {
                "--pui-grad-from": logo.hex,
              }),
          } as React.CSSProperties
        }
      >
        <a