mantine

client/src/pages/Main.tsx

@@ -1,15 +1,54 @@
-import { Box, Card, Typography } from "@mui/material";
+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() {
-    return (
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', p: '16px' }}>
-            <Typography variant='h6' fontWeight='700'>
-                Последние файлы
-            </Typography>
+    const navigate = useNavigate()
 
-            <Card>
+    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>
-        </Box>
+        )
+    }
+
+    return (
+        <Flex 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>
     )
 }