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