Ryan/docmost-ryan
1
0
Fork 0
mirror of https://github.com/Shadowfita/docmost.git synced 2025-11-23 21:21:04 +10:00
Code Issues Packages Projects Releases Wiki Activity

Add avatar and status to table

Browse Source
This commit is contained in:
Philipinho
2023-09-26 13:06:35 +01:00
parent 3a53a7ea30
commit bea107d8a6
1 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/features/settings/workspace/members/components/workspace-members-table.tsx
View File

@ -4,7 +4,7 @@ import { useAtom } from 'jotai';
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
import { useQuery } from '@tanstack/react-query';
import { getWorkspaceUsers } from '@/features/workspace/services/workspace-service';
import { Table } from '@mantine/core';
import { Group, Table, Avatar, Text, Badge } from '@mantine/core';
export default function WorkspaceMembersTable() {
const [currentUser] = useAtom(currentUserAtom);
@ -22,11 +22,11 @@ export default function WorkspaceMembersTable() {
<>
{isSuccess &&
<Table>
<Table verticalSpacing="sm">
<Table.Thead>
<Table.Tr>
<Table.Th>Name</Table.Th>
<Table.Th>Email</Table.Th>
<Table.Th>Status</Table.Th>
<Table.Th>Role</Table.Th>
</Table.Tr>
</Table.Thead>
@ -36,8 +36,27 @@ export default function WorkspaceMembersTable() {
{
data['users']?.map((user, index) => (
<Table.Tr key={index}>
<Table.Td>{user.name}</Table.Td>
<Table.Td>{user.email}</Table.Td>
<Table.Td>
<Group gap="sm">
<Avatar size={40} src={user.name} radius={40} />
<div>
<Text fz="sm" fw={500}>
{user.name}
</Text>
<Text fz="xs" c="dimmed">
{user.email}
</Text>
</div>
</Group>
</Table.Td>
<Table.Td>
<Badge variant="light">
Active
</Badge>
</Table.Td>
<Table.Td>{user.workspaceRole}</Table.Td>
</Table.Tr>
))