cal.pub0.org/apps/web/components/team/TeamPill.tsx

import { MembershipRole } from "@prisma/client";
import classNames from "classnames";

import { useLocale } from "@lib/hooks/useLocale";

type PillColor = "blue" | "green" | "red" | "yellow";

interface Props {
  text: string;
  color?: PillColor;
}

export default function TeamPill(props: Props) {
  return (
    <div
      className={classNames("self-center rounded-md border px-3 py-1 text-xs capitalize ltr:mr-2 rtl:ml-2", {
        "border-gray-200 bg-gray-50 text-gray-700": !props.color,
        "border-blue-200 bg-blue-50 text-blue-700": props.color === "blue",
        "border-red-200 bg-red-50 text-red-700": props.color === "red",
        "border-yellow-200 bg-yellow-50 text-yellow-700": props.color === "yellow",
        "border-green-200 bg-green-50 text-green-600": props.color === "green",
      })}>
      {props.text}
    </div>
  );
}

export function TeamRole(props: { role: MembershipRole }) {
  const { t } = useLocale();
  const keys: Record<MembershipRole, PillColor | undefined> = {
    [MembershipRole.OWNER]: undefined,
    [MembershipRole.ADMIN]: "red",
    [MembershipRole.MEMBER]: "blue",
  };
  return <TeamPill text={t(props.role.toLowerCase())} color={keys[props.role]} />;
}