36 lines
918 B
TypeScript
36 lines
918 B
TypeScript
import {
|
|
UpStatusBox,
|
|
DownStatusBox,
|
|
PausedStatusBox,
|
|
InitializingStatusBox,
|
|
BreachedStatusBox,
|
|
} from "@/Components/design-elements";
|
|
import Stack from "@mui/material/Stack";
|
|
|
|
import type { MonitorsSummary } from "@/Types/Monitor";
|
|
import { useTheme } from "@mui/material";
|
|
|
|
interface MonitorsSummaryProps {
|
|
summary: MonitorsSummary | null;
|
|
showBreached?: boolean;
|
|
}
|
|
|
|
export const HeaderMonitorsSummary = ({
|
|
summary,
|
|
showBreached = false,
|
|
}: MonitorsSummaryProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Stack
|
|
direction={{ xs: "column", md: "row" }}
|
|
gap={theme.spacing(8)}
|
|
>
|
|
<UpStatusBox n={summary?.upMonitors || 0} />
|
|
<DownStatusBox n={summary?.downMonitors || 0} />
|
|
{showBreached && <BreachedStatusBox n={summary?.breachedMonitors || 0} />}
|
|
<PausedStatusBox n={summary?.pausedMonitors || 0} />
|
|
<InitializingStatusBox n={summary?.initializingMonitors || 0} />
|
|
</Stack>
|
|
);
|
|
};
|