36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { MembershipRole } from "@prisma/client";
|
|
import classNames from "classnames";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
|
|
type PillColor = "blue" | "green" | "red" | "orange";
|
|
|
|
interface Props {
|
|
text: string;
|
|
color?: PillColor;
|
|
}
|
|
|
|
export default function TeamPill(props: Props) {
|
|
return (
|
|
<div
|
|
className={classNames("text-medium self-center rounded-md px-1 py-0.5 text-xs ltr:mr-1 rtl:ml-1", {
|
|
" bg-gray-100 text-gray-800": !props.color,
|
|
" bg-blue-100 text-blue-800": props.color === "blue",
|
|
" bg-red-100 text-red-800 ": props.color === "red",
|
|
" bg-orange-100 text-orange-800": props.color === "orange",
|
|
})}>
|
|
{props.text}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function TeamRole(props: { role: MembershipRole }) {
|
|
const { t } = useLocale();
|
|
const keys: Record<MembershipRole, PillColor | undefined> = {
|
|
[MembershipRole.OWNER]: "blue",
|
|
[MembershipRole.ADMIN]: "red",
|
|
[MembershipRole.MEMBER]: undefined,
|
|
};
|
|
return <TeamPill text={t(props.role.toLowerCase())} color={keys[props.role]} />;
|
|
}
|