56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
import {Button, Divider, Flex, Tabs} from "@mantine/core";
|
|
import {iconMStyle, maxWidth} from "../styles.ts";
|
|
import React from "react";
|
|
import {DashboardPageType} from "~/utils/enums.ts";
|
|
import HomeIcon from "mdi-react/HomeIcon";
|
|
import InformationIcon from "mdi-react/InformationIcon";
|
|
import LogoutIcon from "mdi-react/LogoutIcon";
|
|
import DownloadIcon from "mdi-react/DownloadIcon";
|
|
import UploadIcon from "mdi-react/UploadIcon";
|
|
|
|
|
|
export function PageNavbar({currentStat, changePageStat}:
|
|
{currentStat: DashboardPageType, changePageStat: (p: DashboardPageType) => any}) {
|
|
|
|
const onClickLogout = () => {
|
|
localStorage.removeItem("password")
|
|
changePageStat(DashboardPageType.Home)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Tabs variant="pills" orientation="vertical" defaultValue="gallery" value={currentStat} style={{flex: 1}}
|
|
onChange={(e) => {if (e) changePageStat(e as DashboardPageType)}}>
|
|
<Tabs.List style={maxWidth}>
|
|
<Tabs.Tab value={DashboardPageType.Dashboard} leftSection={<HomeIcon style={iconMStyle}/>}>
|
|
Home
|
|
</Tabs.Tab>
|
|
|
|
<Divider my="0px" label="Performance Test" labelPosition="center" />
|
|
|
|
<Tabs.Tab value={DashboardPageType.DashboardTestGetList} leftSection={<DownloadIcon style={iconMStyle}/>}>
|
|
Fetch Data
|
|
</Tabs.Tab>
|
|
|
|
<Tabs.Tab value={DashboardPageType.DashboardTestPushData} leftSection={<UploadIcon style={iconMStyle}/>}>
|
|
Push Data
|
|
</Tabs.Tab>
|
|
|
|
</Tabs.List>
|
|
</Tabs>
|
|
|
|
<Flex gap="md" justify="flex-start" align="flex-end" direction="row" wrap="wrap" style={maxWidth}>
|
|
|
|
<Button variant="outline" color="blue" fullWidth justify="start" onClick={() => changePageStat(DashboardPageType.About)}
|
|
leftSection={<InformationIcon style={iconMStyle}/>}>
|
|
About
|
|
</Button>
|
|
<Button variant="outline" color="red" fullWidth justify="start" onClick={onClickLogout}
|
|
leftSection={<LogoutIcon style={iconMStyle}/>}>
|
|
Logout
|
|
</Button>
|
|
</Flex>
|
|
|
|
</>
|
|
)
|
|
} |