49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { h, type FunctionComponent } from 'preact'
|
|
import Button from './button.tsx'
|
|
import { Table, Td, Th } from './table.tsx'
|
|
|
|
const RolesTable: FunctionComponent<{ roles?: ANY[]; onDelete?: ANY; onEdit?: ANY; onSortBy?: ANY }> = ({
|
|
roles,
|
|
onDelete,
|
|
onEdit,
|
|
onSortBy,
|
|
}) => (
|
|
<Table onSortBy={onSortBy}>
|
|
<thead>
|
|
<tr>
|
|
<Th sort='id'>ID</Th>
|
|
<Th sort>Name</Th>
|
|
<Th sort>Created At</Th>
|
|
<th>Created By</th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{roles?.length ? (
|
|
roles.map((role) => (
|
|
<tr key={role.id}>
|
|
<td>{role.id}</td>
|
|
<td>{role.name}</td>
|
|
<td>{role.createdAt}</td>
|
|
<td>{role.createdBy?.email}</td>
|
|
<Td buttons>
|
|
<Button size='small' icon='edit' onClick={() => onEdit(role.id)}>
|
|
Edit
|
|
</Button>{' '}
|
|
<Button size='small' icon='delete' color='red' onClick={() => onDelete(role.id)}>
|
|
Delete
|
|
</Button>
|
|
</Td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={5}>No roles found</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</Table>
|
|
)
|
|
|
|
export default RolesTable
|