first commit

calcom/packages/features/insights/components/TotalUserFeedbackTable.tsx

@@ -0,0 +1,54 @@
+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 TotalUserFeedbackTable = ({
+  data,
+}: {
+  data:
+    | {
+        userId: number | null;
+        user: Pick<User, "avatarUrl" | "name">;
+        emailMd5?: string;
+        count?: number;
+        averageRating?: number | null;
+        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.averageRating ? item.averageRating.toFixed(1) : item.count}
+                    </strong>
+                  </Text>
+                </TableCell>
+              </TableRow>
+            ))}
+        </>
+      </TableBody>
+    </Table>
+  );
+};