64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
|
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
|
import styled from '@emotion/styled';
|
|
import { Avatar, OverflowingTextWithTooltip } from 'twenty-ui';
|
|
import { WorkspaceMember } from '~/generated-metadata/graphql';
|
|
|
|
const StyledIconWrapper = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
margin-right: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
const StyledNameCell = styled.div`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
flex: 1;
|
|
min-width: 0;
|
|
`;
|
|
|
|
const StyledNameContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledTableCell = styled(TableCell)`
|
|
overflow: hidden;
|
|
`;
|
|
|
|
type RoleAssignmentTableRowProps = {
|
|
workspaceMember: WorkspaceMember;
|
|
};
|
|
|
|
export const RoleAssignmentTableRow = ({
|
|
workspaceMember,
|
|
}: RoleAssignmentTableRowProps) => {
|
|
return (
|
|
<TableRow gridAutoColumns="2fr 4fr">
|
|
<StyledTableCell>
|
|
<StyledNameContainer>
|
|
<StyledIconWrapper>
|
|
<Avatar
|
|
avatarUrl={workspaceMember.avatarUrl}
|
|
placeholderColorSeed={workspaceMember.id}
|
|
placeholder={workspaceMember.name.firstName ?? ''}
|
|
type="rounded"
|
|
size="md"
|
|
/>
|
|
</StyledIconWrapper>
|
|
<StyledNameCell>
|
|
<OverflowingTextWithTooltip
|
|
text={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
|
|
/>
|
|
</StyledNameCell>
|
|
</StyledNameContainer>
|
|
</StyledTableCell>
|
|
<StyledTableCell>
|
|
<OverflowingTextWithTooltip text={workspaceMember.userEmail} />
|
|
</StyledTableCell>
|
|
</TableRow>
|
|
);
|
|
};
|