mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-10 15:35:55 +01:00
💄 Align actions to the right on manage invite page
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user