54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { useState } from "react"
|
|
import ServersView from "../components/ServersView"
|
|
import ServerIpsView from "../components/ServerIpsView"
|
|
import ServerHardware from "../components/ServerHardware"
|
|
import ServerStorage from "../components/ServerStorages"
|
|
import { Tab, TabList } from "@fluentui/react-components"
|
|
|
|
export default function Servers() {
|
|
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 (
|
|
<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>
|
|
|
|
<div>
|
|
{tabs.find(tab => tab.id === selectedTab)?.content}
|
|
</div>
|
|
</div>
|
|
|
|
)
|
|
} |