56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
|
import { Table, TableBody, TableCell, TableRow, Text } from "@tremor/react";
|
||
|
|
|
||
|
|
import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
|
||
|
|
import type { User } from "@calcom/prisma/client";
|
||
|
|
import { Avatar } from "@calcom/ui";
|
||
|
|
|
||
|
|
export const TotalBookingUsersTable = ({
|
||
|
|
data,
|
||
|
|
}: {
|
||
|
|
data:
|
||
|
|
| {
|
||
|
|
userId: number | null;
|
||
|
|
user: Pick<User, "avatarUrl" | "name">;
|
||
|
|
emailMd5?: string;
|
||
|
|
count: number;
|
||
|
|
username?: string;
|
||
|
|
}[]
|
||
|
|
| undefined;
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<Table>
|
||
|
|
<TableBody>
|
||
|
|
<>
|
||
|
|
{data && data?.length > 0 ? (
|
||
|
|
data?.map((item) => (
|
||
|
|
<TableRow key={item.userId}>
|
||
|
|
<TableCell className="flex flex-row">
|
||
|
|
<Avatar
|
||
|
|
alt={item.user.name || ""}
|
||
|
|
size="sm"
|
||
|
|
imageSrc={getUserAvatarUrl({ avatarUrl: item.user.avatarUrl })}
|
||
|
|
title={item.user.name || ""}
|
||
|
|
className="m-2"
|
||
|
|
/>
|
||
|
|
<p className="text-default mx-0 my-auto">
|
||
|
|
<strong>{item.user.name}</strong>
|
||
|
|
</p>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-right">
|
||
|
|
<Text>
|
||
|
|
<strong className="text-default">{item.count}</strong>
|
||
|
|
</Text>
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))
|
||
|
|
) : (
|
||
|
|
<TableRow>
|
||
|
|
<TableCell>No members found</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
);
|
||
|
|
};
|