Spaces:
Sleeping
Sleeping
File size: 2,801 Bytes
c40c75a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
import React from 'react';
import { Member } from "@/components/networking";
import {
Card,
Table,
TableHead,
TableRow,
TableHeaderCell,
TableBody,
TableCell,
Text,
Icon,
Button as TremorButton,
} from '@tremor/react';
import {
TeamData,
} from './team_info';
import { PencilAltIcon, PlusIcon, TrashIcon } from "@heroicons/react/outline";
interface TeamMembersComponentProps {
teamData: TeamData;
canEditTeam: boolean;
handleMemberDelete: (member: Member) => void;
setSelectedEditMember: (member: Member) => void;
setIsEditMemberModalVisible: (visible: boolean) => void;
setIsAddMemberModalVisible: (visible: boolean) => void;
}
const TeamMembersComponent: React.FC<TeamMembersComponentProps> = ({
teamData,
canEditTeam,
handleMemberDelete,
setSelectedEditMember,
setIsEditMemberModalVisible,
setIsAddMemberModalVisible,
}) => {
return (
<div className="space-y-4">
<Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh]">
<Table>
<TableHead>
<TableRow>
<TableHeaderCell>User ID</TableHeaderCell>
<TableHeaderCell>User Email</TableHeaderCell>
<TableHeaderCell>Role</TableHeaderCell>
<TableHeaderCell></TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{teamData.team_info.members_with_roles.map((member: Member, index: number) => (
<TableRow key={index}>
<TableCell>
<Text className="font-mono">{member.user_id}</Text>
</TableCell>
<TableCell>
<Text className="font-mono">{member.user_email}</Text>
</TableCell>
<TableCell>
<Text className="font-mono">{member.role}</Text>
</TableCell>
<TableCell>
{canEditTeam && (
<>
<Icon
icon={PencilAltIcon}
size="sm"
onClick={() => {
setSelectedEditMember(member);
setIsEditMemberModalVisible(true);
}}
/>
<Icon
icon={TrashIcon}
size="sm"
onClick={() => handleMemberDelete(member)}
/>
</>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
<TremorButton onClick={() => setIsAddMemberModalVisible(true)}>
Add Member
</TremorButton>
</div>
);
};
export default TeamMembersComponent;
|