36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
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]} />;
|
|
}
|