joinmastodon/components/SponsorCard.tsx

import classNames from "classnames"
import Image from "next/legacy/image"
import { FormattedMessage } from "react-intl"

const tierName = (tierId) => {
  switch(tierId) {
  case 'gold':
    return <FormattedMessage id="gold_sponsor" defaultMessage="Gold sponsor" />;
  case 'silver':
    return <FormattedMessage id="silver_sponsor" defaultMessage="Silver sponsor" />;
  default:
    return <FormattedMessage id="sponsor" defaultMessage="Sponsor" />;
  }
};

/** Sponsor Card, supporting data from `silver`, `generalHighlighted`, and `general` */
const SponsorCard = ({ sponsor, tier }) => {
  return (
    <div
      className={classNames(
        "grid grid-cols-[auto_1fr] gap-4 rounded p-4",
        tier === "generalHighlighted" && "bg-nightshade-900 text-white",
        (tier === "silver" || tier === "gold") && "border border-gray-3 hover:bg-gray-4"
      )}
    >
      {(tier === "silver" || tier === "gold") && (
        <div className="relative h-[56px] w-[56px] overflow-hidden rounded-md bg-blurple-gradient">
          {sponsor.logo && (
            <Image src={sponsor.logo} alt="" layout="fill" objectFit="cover" />
          )}
        </div>
      )}

      <div
        className={classNames("truncate", tier !== "silver" ? "w-full" : null)}
      >
        <span
          className={classNames(
            "b3 !leading-[1.5]",
            tier === "generalHighlighted"
              ? "text-nightshade-100"
              : "text-gray-1"
          )}
        >
          {tierName(tier)}
        </span>

        <p className="b2 truncate !font-semibold">{sponsor.name || sponsor}</p>
      </div>
    </div>
  )
}
export default SponsorCard