NestJS backend rewrite; migrate client to FluentUI V9

client/src/pages/Servers.tsx

@@ -3,46 +3,52 @@ import ServersView from "../components/ServersView"
 import ServerIpsView from "../components/ServerIpsView"
 import ServerHardware from "../components/ServerHardware"
 import ServerStorage from "../components/ServerStorages"
-import { Flex, ScrollAreaAutosize, Tabs } from "@mantine/core"
+import { Tab, TabList } from "@fluentui/react-components"
 
 export default function Servers() {
-    const [currentTab, setCurrentTab] = useState<string | null>('0')
+    const tabs = [{
+        id: 'servers',
+        name: 'Серверы',
+        content: <ServersView />
+    },
+    {
+        id: 'ips',
+        name: 'IP-адреса',
+        content: <ServerIpsView />
+    },
+    {
+        id: 'hardware',
+        name: 'Hardware',
+        content: <ServerHardware />
+    },
+    {
+        id: 'storage',
+        name: 'Хранилище',
+        content: <ServerStorage />
+    }
+    ]
+
+    const [selectedTab, setSelectedTab] = useState<string | unknown>(tabs[0].id)
 
     return (
-        <ScrollAreaAutosize w={'100%'} h={'100%'} p='sm'>
-            <Flex gap='sm' direction='column'>
-                <Tabs value={currentTab} onChange={setCurrentTab}>
-                    <Tabs.List>
-                        <Tabs.Tab value="0">Серверы</Tabs.Tab>
-                        <Tabs.Tab value="1">IP-адреса</Tabs.Tab>
-                        <Tabs.Tab value="3">Hardware</Tabs.Tab>
-                        <Tabs.Tab value="4">Storages</Tabs.Tab>
-                    </Tabs.List>
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
+            gap: '1rem',
+            padding: '1rem'
+        }}>
+            <TabList selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
+                {tabs.map(tab => (
+                    <Tab value={tab.id}>{tab.name}</Tab>
+                ))}
+            </TabList>
 
-                    <Tabs.Panel value="0" pt='sm'>
-                        <ServersView />
-                    </Tabs.Panel>
+            <div>
+                {tabs.find(tab => tab.id === selectedTab)?.content}
+            </div>
+        </div>
 
-                    <Tabs.Panel value="1" pt='sm'>
-                        <ServerIpsView />
-                    </Tabs.Panel>
-
-                    <Tabs.Panel value="2" pt='sm'>
-                        <ServerHardware />
-                    </Tabs.Panel>
-
-                    <Tabs.Panel value="3" pt='sm'>
-                        <ServerStorage />
-                    </Tabs.Panel>
-                </Tabs>
-            </Flex>
-
-            {/* <BarChart
-                    xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
-                    series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
-                    width={500}
-                    height={300}
-                /> */}
-        </ScrollAreaAutosize>
     )
 }