37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import { Outlet, useLocation, useNavigate } from "react-router-dom";
|
|
import { Box, Paper, Tab, Tabs } from "@mui/material";
|
|
|
|
export default function CommunicationsLayout() {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const getActiveTab = () => {
|
|
const path = location.pathname;
|
|
if (path.includes("/communications/logs")) return "/communications/logs";
|
|
return "/communications/settings";
|
|
};
|
|
|
|
const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
|
|
navigate(newValue);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
|
|
<Paper sx={{ mb: 2 }}>
|
|
<Tabs
|
|
value={getActiveTab()}
|
|
onChange={handleChange}
|
|
indicatorColor="primary"
|
|
textColor="primary"
|
|
>
|
|
<Tab label="Configurazione" value="/communications/settings" />
|
|
<Tab label="Logs" value="/communications/logs" />
|
|
</Tabs>
|
|
</Paper>
|
|
<Box sx={{ flex: 1, overflow: "auto" }}>
|
|
<Outlet />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|