import { ActionIcon, Badge, Button, Card, Flex, Group, LoadingOverlay, Menu, SimpleGrid, Stack, Text, Title, } from '@mantine/core'; import { useListState } from '@mantine/hooks'; import { modals } from '@mantine/modals'; import { IconApps, IconDotsVertical, IconFolderFilled, IconPlus, IconStar, IconStarFilled, IconTrash, } from '@tabler/icons-react'; import Head from 'next/head'; import Link from 'next/link'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout'; import { sleep } from '~/tools/client/time'; import { api } from '~/utils/api'; const BoardsPage = () => { const { data } = api.boards.all.useQuery(); const [deletingDashboards, { append, filter }] = useListState([]); return ( Boards • Homarr Boards {data && ( {data.map((board, index) => ( {board.name} } color="pink" variant="light" > Filesystem {board.isDefaultForUser && ( } color="yellow" variant="light" > Default )} Apps {board.countApps} Widgets {board.countWidgets} Categories {board.countCategories} { modals.openContextModal({ modal: 'deleteBoardModal', title: Delete board, innerProps: { boardName: board.name, onConfirm: async () => { append(board.name); // give user feedback, that it's being deleted await sleep(500); filter((item, _) => item !== board.name); }, }, }); }} icon={} color="red" > Permanently delete ))} )} ); }; export default BoardsPage;