Function ExampleCard

components/ExampleListSection.tsx:115–186

({
  repo,
  avatars = [],
  totalContributors = 0,
  hideOnSmall = false,
  hideOnMedium = false,
}: ExampleCardPropsExtended)

}

function ExampleCard({
  repo,
  avatars = [],
  totalContributors = 0,
  hideOnSmall = false,
  hideOnMedium = false,
}: ExampleCardPropsExtended) {
  // Show top 3 contributors; ensure highest-ranked appears rightmost.
  const orderedAvatars = avatars.slice(0, 3).reverse();
  // Badge background color based on GitHub language colors
  const badgeBg = LANG_BG_COLORS[repo.language] ?? "#6b7280";

  return (
    <a
      href={`https://github.com/${repo.name}/blob/-/AGENTS.md`}
      target="_blank"
      rel="noopener noreferrer"
      className={`lg:aspect-video bg-white dark:bg-black border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm flex flex-col justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
        hideOnSmall
          ? "hidden lg:flex"
          : hideOnMedium
          ? "flex md:hidden lg:flex"
          : ""
      }`}
    >
      <div>
        <h3
          className="font-semibold text-lg leading-snug truncate"
          title={repo.name}
        >
          {repo.name}
        </h3>
        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
          {repo.description}
        </p>
      </div>

      <div className="flex items-end justify-between mt-4">
        <span
          className="text-xs font-semibold px-2 py-0.5 rounded"
          style={{ backgroundColor: badgeBg, color: "#fff" }}
        >
          {repo.language}
        </span>
        <div className="flex items-center justify-center">
          <div className="flex items-center justify-center -space-x-2">
            {orderedAvatars.length > 0
              ? orderedAvatars.map((url, i) => (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    key={i}
                    src={url}
                    alt="Contributor avatar"
                    className="w-6 h-6 rounded-full ring-2 ring-white dark:ring-gray-900 object-cover block shrink-0"
                  />
                ))
              : Array.from({ length: 3 }).map((_, i) => (
                  <span