42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { Typography } from "@mui/material";
|
|
import { CurrConsumptionWidget } from "./HomeRoute/CurrConsumptionWidget";
|
|
import Grid from "@mui/material/Grid";
|
|
import { CachedConsumptionWidget } from "./HomeRoute/CachedConsumptionWidget";
|
|
import { RelayConsumptionWidget } from "./HomeRoute/RelayConsumptionWidget";
|
|
import { RelaysListRoute } from "./RelaysListRoute";
|
|
import { DevicesRoute } from "./DevicesRoute";
|
|
|
|
export function HomeRoute(): React.ReactElement {
|
|
return (
|
|
<div style={{ flex: 1, padding: "10px" }}>
|
|
<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
|
|
Overview
|
|
</Typography>
|
|
<Grid
|
|
container
|
|
spacing={2}
|
|
columns={12}
|
|
sx={{ mb: (theme) => theme.spacing(2) }}
|
|
>
|
|
<Grid size={{ xs: 12, sm: 6, lg: 3 }}>
|
|
<CurrConsumptionWidget />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, lg: 3 }}>
|
|
<RelayConsumptionWidget />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, lg: 3 }}>
|
|
<CachedConsumptionWidget />
|
|
</Grid>
|
|
|
|
<Grid size={{ xs: 12, sm: 12, lg: 9 }}>
|
|
<DevicesRoute homeWidget />
|
|
</Grid>
|
|
|
|
<Grid size={{ xs: 12, sm: 12, lg: 9 }}>
|
|
<RelaysListRoute homeWidget />
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
);
|
|
}
|