Weiko
431da37cdf
## Context Adding stories for roles components. Also moving modules components to the proper "modules" folder, "pages" folder being only for entry points. ## Test Run storybook <img width="1145" alt="Screenshot 2025-02-26 at 13 40 40" src="https://github.com/user-attachments/assets/bc184ab0-c590-4362-8c5a-1bf5ef176e6c" /> <img width="1149" alt="Screenshot 2025-02-26 at 13 40 32" src="https://github.com/user-attachments/assets/699cd205-31db-45e9-b9c1-caff1832bd47" /> <img width="1153" alt="Screenshot 2025-02-26 at 13 40 11" src="https://github.com/user-attachments/assets/72e45a67-ea89-4999-8b16-6f7d027d07f6" /> <img width="471" alt="Screenshot 2025-02-26 at 13 38 16" src="https://github.com/user-attachments/assets/62676943-9935-42b5-b769-5544f7eed85f" /> <img width="472" alt="Screenshot 2025-02-26 at 13 38 12" src="https://github.com/user-attachments/assets/946baab9-1be4-439e-bf99-0ebeab0995f7" />
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { Table } from '@/ui/layout/table/components/Table';
|
|
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 StyledTable = styled(Table)`
|
|
margin-top: ${({ theme }) => theme.spacing(0.5)};
|
|
`;
|
|
|
|
const StyledIconWrapper = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
type RoleAssignmentTableRowProps = {
|
|
workspaceMember: WorkspaceMember;
|
|
};
|
|
|
|
export const RoleAssignmentTableRow = ({
|
|
workspaceMember,
|
|
}: RoleAssignmentTableRowProps) => {
|
|
return (
|
|
<StyledTable>
|
|
<TableRow gridAutoColumns="150px 1fr 1fr">
|
|
<TableCell>
|
|
<StyledIconWrapper>
|
|
<Avatar
|
|
avatarUrl={workspaceMember.avatarUrl}
|
|
placeholderColorSeed={workspaceMember.id}
|
|
placeholder={workspaceMember.name.firstName ?? ''}
|
|
type="rounded"
|
|
size="md"
|
|
/>
|
|
</StyledIconWrapper>
|
|
<OverflowingTextWithTooltip
|
|
text={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<OverflowingTextWithTooltip text={workspaceMember.userEmail} />
|
|
</TableCell>
|
|
</TableRow>
|
|
</StyledTable>
|
|
);
|
|
};
|