53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { h, type FunctionComponent } from 'preact'
|
|
import Button from './button.tsx'
|
|
import { Table, Td, Th } from './table.tsx'
|
|
|
|
const InvitesTable: FunctionComponent<{ invites: ANY[]; onDelete?: ANY; onSortBy?: ANY }> = ({
|
|
invites,
|
|
onDelete,
|
|
onSortBy,
|
|
}) => (
|
|
<Table onSortBy={onSortBy}>
|
|
<thead>
|
|
<tr>
|
|
<Th sort='id'>ID</Th>
|
|
<Th sort>Email</Th>
|
|
<Th sort>Token</Th>
|
|
<Th>Roles</Th>
|
|
<Th sort>Created At</Th>
|
|
<Th>Created By</Th>
|
|
<Th sort>Consumed At</Th>
|
|
<Th>Consumed By</Th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{invites?.length ? (
|
|
invites.map((invite) => (
|
|
<tr key={invite.id}>
|
|
<td>{invite.id}</td>
|
|
<td>{invite.email}</td>
|
|
<td>{invite.token}</td>
|
|
<td>{invite.roles.map((role: ANY) => role.name).join(', ')}</td>
|
|
<td>{invite.createdAt}</td>
|
|
<td>{invite.createdBy?.email}</td>
|
|
<td>{invite.consumedAt}</td>
|
|
<td>{invite.consumedBy?.email}</td>
|
|
<Td buttons>
|
|
<Button size='small' icon='delete' color='red' onClick={() => onDelete(invite.id)}>
|
|
Delete
|
|
</Button>
|
|
</Td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={8}>No invites found</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</Table>
|
|
)
|
|
|
|
export default InvitesTable
|