import { ActionIcon, Autocomplete, Avatar, Button, Flex, Group, Pagination, SegmentedControl, Table, Text, Title, } from '@mantine/core'; import { openContextModal } from '@mantine/modals'; import { IconPlus, IconTrash } from '@tabler/icons-react'; import Head from 'next/head'; import Link from 'next/link'; import { useState } from 'react'; import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { api } from '~/utils/api'; const ManageUsersPage = () => { const { isLoading, data, fetchNextPage, fetchPreviousPage } = api.user.getAll.useInfiniteQuery( { limit: 10, }, { getNextPageParam: (lastPage) => lastPage.nextCursor, } ); const [activePage, _] = useState(0); return ( Users • Homarr Manage users Using users, you have granular control who can access, edit or delete resources on your Homarr instance. {data && ( <> {data.pages[activePage].users.map((user, index) => ( ))}
User
{user.name} { openContextModal({ modal: 'deleteUserModal', title: Delete user ${user.name}, innerProps: { userId: user.id, username: user.name ?? '', }, }); }} color="red" variant="light" >
)} ); }; export default ManageUsersPage;