2
0
Files
cal/calcom/packages/features/insights/components/FeedbackTable.tsx
2024-08-09 00:39:27 +02:00

71 lines
2.1 KiB
TypeScript

import { Table, TableBody, TableCell, TableRow, Text } from "@tremor/react";
import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { User } from "@calcom/prisma/client";
import { Avatar, EmptyScreen, Button } from "@calcom/ui";
export const FeedbackTable = ({
data,
}: {
data:
| {
userId: number | null;
user: Pick<User, "avatarUrl" | "name">;
emailMd5?: string;
username?: string;
rating: number | null;
feedback: string | null;
}[]
| undefined;
}) => {
const { t } = useLocale();
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.rating}</strong>
</Text>
</TableCell>
<TableCell className="text-right">
<Text>
<strong className="text-default">{item.feedback}</strong>
</Text>
</TableCell>
</TableRow>
))
) : (
<EmptyScreen
Icon="zap"
headline={t("no_ratings")}
description={t("no_ratings_description")}
buttonRaw={
<Button target="_blank" color="secondary" href="/workflows">
{t("workflows")}
</Button>
}
/>
)}
</>
</TableBody>
</Table>
);
};