2022-12-27 01:57:59 +01:00
|
|
|
import {
|
|
|
|
Button,
|
2023-01-21 02:12:53 +01:00
|
|
|
Text,
|
2022-12-27 01:57:59 +01:00
|
|
|
Icon,
|
|
|
|
Table,
|
|
|
|
TableBody,
|
|
|
|
TableCell,
|
|
|
|
TableColumn,
|
|
|
|
TableHeader,
|
|
|
|
TableRow,
|
|
|
|
} from 'react-basics';
|
2023-01-21 02:12:53 +01:00
|
|
|
import { formatDistance } from 'date-fns';
|
|
|
|
import Link from 'next/link';
|
|
|
|
import { Edit } from 'components/icons';
|
2022-12-27 01:57:59 +01:00
|
|
|
import styles from './UsersTable.module.css';
|
|
|
|
|
2023-01-21 02:12:53 +01:00
|
|
|
const columns = [
|
2022-12-27 01:57:59 +01:00
|
|
|
{ name: 'username', label: 'Username', style: { flex: 2 } },
|
|
|
|
{ name: 'role', label: 'Role', style: { flex: 2 } },
|
|
|
|
{ name: 'created', label: 'Created' },
|
|
|
|
{ name: 'action', label: ' ' },
|
|
|
|
];
|
|
|
|
|
2023-01-21 02:12:53 +01:00
|
|
|
export default function UsersTable({ data = [] }) {
|
2022-12-27 01:57:59 +01:00
|
|
|
return (
|
2023-01-21 02:12:53 +01:00
|
|
|
<Table className={styles.table} columns={columns} rows={data}>
|
|
|
|
<TableHeader>
|
|
|
|
{(column, index) => {
|
|
|
|
return (
|
|
|
|
<TableColumn key={index} className={styles.header} style={{ ...column.style }}>
|
|
|
|
{column.label}
|
|
|
|
</TableColumn>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</TableHeader>
|
|
|
|
<TableBody>
|
|
|
|
{(row, keys, rowIndex) => {
|
|
|
|
row.created = formatDistance(new Date(row.createdAt), new Date(), {
|
|
|
|
addSuffix: true,
|
|
|
|
});
|
2022-12-27 01:57:59 +01:00
|
|
|
|
2023-01-21 02:12:53 +01:00
|
|
|
row.action = (
|
|
|
|
<div className={styles.actions}>
|
|
|
|
<Link href={`/settings/users/${row.id}`}>
|
|
|
|
<Button>
|
|
|
|
<Icon>
|
|
|
|
<Edit />
|
|
|
|
</Icon>
|
|
|
|
<Text>Edit</Text>
|
|
|
|
</Button>
|
|
|
|
</Link>
|
|
|
|
</div>
|
|
|
|
);
|
2022-12-27 01:57:59 +01:00
|
|
|
|
2023-01-21 02:12:53 +01:00
|
|
|
return (
|
|
|
|
<TableRow key={rowIndex} data={row} keys={keys}>
|
|
|
|
{(data, key, colIndex) => {
|
|
|
|
return (
|
|
|
|
<TableCell
|
|
|
|
key={colIndex}
|
|
|
|
className={styles.cell}
|
|
|
|
style={{ ...columns[colIndex]?.style }}
|
|
|
|
>
|
|
|
|
{data[key]}
|
|
|
|
</TableCell>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</TableRow>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</TableBody>
|
|
|
|
</Table>
|
2022-12-27 01:57:59 +01:00
|
|
|
);
|
|
|
|
}
|