Typescript refactor.

src/app/(main)/settings/teams/[id]/TeamMembersTable.tsx

@@ -0,0 +1,44 @@
+import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
+import useMessages from 'components/hooks/useMessages';
+import useUser from 'components/hooks/useUser';
+import { ROLES } from 'lib/constants';
+import TeamMemberRemoveButton from './TeamMemberRemoveButton';
+
+export function TeamMembersTable({
+  data = [],
+  teamId,
+  readOnly,
+}: {
+  data: any[];
+  teamId: string;
+  readOnly: boolean;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+  const breakpoint = useBreakpoint();
+
+  const roles = {
+    [ROLES.teamOwner]: formatMessage(labels.teamOwner),
+    [ROLES.teamMember]: formatMessage(labels.teamMember),
+  };
+
+  return (
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+      <GridColumn name="username" label={formatMessage(labels.username)} />
+      <GridColumn name="role" label={formatMessage(labels.role)}>
+        {row => roles[row?.teamUser?.[0]?.role]}
+      </GridColumn>
+      <GridColumn name="action" label=" " alignment="end">
+        {row => {
+          return (
+            !readOnly &&
+            row?.teamUser?.[0]?.role !== ROLES.teamOwner &&
+            user?.id !== row?.id && <TeamMemberRemoveButton teamId={teamId} userId={row.id} />
+          );
+        }}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default TeamMembersTable;