55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import Avatar from "~/components/Avatar";
|
|
import Badge from "~/components/Badge";
|
|
import LabelIcon from "~/components/LabelIcon";
|
|
import { getAvatarUrl } from "~/utils/helpers";
|
|
|
|
const Card = ({
|
|
title,
|
|
labels,
|
|
members,
|
|
}: {
|
|
title: string;
|
|
labels: { name: string; colourCode: string | null }[];
|
|
members: {
|
|
publicId: string;
|
|
email: string;
|
|
user: { name: string | null; email: string; image: string | null } | null;
|
|
}[];
|
|
}) => {
|
|
return (
|
|
<div className="flex flex-col rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300">
|
|
<span>{title}</span>
|
|
{labels.length || members.length ? (
|
|
<div className="mt-2 flex flex-col justify-end">
|
|
<div className="space-x-0.5">
|
|
{labels.map((label) => (
|
|
<Badge
|
|
value={label.name}
|
|
iconLeft={<LabelIcon colourCode={label.colourCode} />}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="isolate flex justify-end -space-x-1 overflow-hidden">
|
|
{members.map(({ user, email }) => {
|
|
const avatarUrl = user?.image
|
|
? getAvatarUrl(user.image)
|
|
: undefined;
|
|
|
|
return (
|
|
<Avatar
|
|
name={user?.name ?? ""}
|
|
email={user?.email ?? email}
|
|
imageUrl={avatarUrl}
|
|
size="sm"
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Card;
|