tests/client/src/pages/Main.tsx

import { Card, Flex, SimpleGrid, Text } from "@mantine/core";
import { IconBuildingFactory2, IconFiles, IconMap, IconReport, IconServer, IconShield, IconUsers } from "@tabler/icons-react";
import { ReactNode } from "react";
import { useNavigate } from "react-router-dom";

export default function Main() {
    const navigate = useNavigate()

    interface CustomCardProps {
        link: string;
        icon: ReactNode;
        label: string;
    }
    const CustomCard = ({
        link,
        icon,
        label
    }: CustomCardProps) => {
        return (
            <Card
                onClick={() => navigate(link)}
                withBorder
                style={{ cursor: 'pointer', userSelect: 'none' }}
            >
                <Flex mih='50'>
                    {icon}
                </Flex>

                <Text fw={500} size="lg" mt="md">
                    {label}
                </Text>
            </Card>
        )
    }

    return (
        <Flex w={'100%'} h={'100%'} direction='column' gap='sm' p='sm'>
            <Text size="xl" fw={700}>
                Главная
            </Text>

            <SimpleGrid cols={{ xs: 1, md: 3 }}>
                <CustomCard link="/user" icon={<IconUsers size='50' color="#6495ED" />} label="Пользователи" />
                <CustomCard link="/role" icon={<IconShield size='50' color="#6495ED" />} label="Роли" />
                <CustomCard link="/documents" icon={<IconFiles size='50' color="#6495ED" />} label="Документы" />
                <CustomCard link="/reports" icon={<IconReport size='50' color="#6495ED" />} label="Отчеты" />
                <CustomCard link="/servers" icon={<IconServer size='50' color="#6495ED" />} label="Серверы" />
                <CustomCard link="/boilers" icon={<IconBuildingFactory2 size='50' color="#6495ED" />} label="Котельные" />
                <CustomCard link="/map-test" icon={<IconMap size='50' color="#6495ED" />} label="ИКС" />
            </SimpleGrid>

        </Flex>
    )
}