💄 Align actions to the right on manage invite page

This commit is contained in:
Manuel
2023-07-31 20:57:18 +02:00
parent 71757d0cce
commit ddfd9fb286

View File

@@ -1,4 +1,14 @@
import { ActionIcon, Button, Center, Flex, Pagination, Table, Text, Title } from '@mantine/core';
import {
ActionIcon,
Button,
Center,
Flex,
Pagination,
Table,
Text,
Title,
createStyles,
} from '@mantine/core';
import { modals } from '@mantine/modals';
import { IconPlus, IconTrash } from '@tabler/icons-react';
import dayjs from 'dayjs';
@@ -18,6 +28,7 @@ const ManageUserInvitesPage = () => {
}
);
const { classes } = useStyles();
const [activePage, setActivePage] = useState(0);
const handleFetchNextPage = async () => {
@@ -32,8 +43,6 @@ const ManageUserInvitesPage = () => {
const currentPage = data?.pages[activePage];
console.log(data?.pages);
return (
<MainLayout>
<Head>
@@ -78,17 +87,17 @@ const ManageUserInvitesPage = () => {
<tbody>
{currentPage.registrationTokens.map((token, index) => (
<tr key={index}>
<td>
<Text>{token.id}</Text>
<td className={classes.tableIdCell}>
<Text lineClamp={1}>{token.id}</Text>
</td>
<td>
<td className={classes.tableCell}>
{dayjs(dayjs()).isAfter(token.expires) ? (
<Text>expired {dayjs(token.expires).fromNow()}</Text>
) : (
<Text>in {dayjs(token.expires).fromNow(true)}</Text>
)}
</td>
<td>
<td className={classes.tableCell}>
<ActionIcon
onClick={() => {
modals.openContextModal({
@@ -130,4 +139,13 @@ const ManageUserInvitesPage = () => {
);
};
const useStyles = createStyles(() => ({
tableIdCell: {
width: '100%',
},
tableCell: {
whiteSpace: 'nowrap'
}
}));
export default ManageUserInvitesPage;