153 lines
3.0 KiB
TypeScript
153 lines
3.0 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import Box from "@mui/material/Box";
|
|
import { BaseBox } from "@/Components/v2/design-elements";
|
|
import Background from "@/assets/Images/background-grid.svg?react";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { SxProps } from "@mui/material";
|
|
|
|
import { useTheme } from "@mui/material/styles";
|
|
|
|
type StatusBoxProps = React.PropsWithChildren<{
|
|
children: React.ReactNode;
|
|
sx?: SxProps;
|
|
}>;
|
|
|
|
export const BGBox = ({ children, sx }: StatusBoxProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<BaseBox
|
|
sx={{
|
|
overflow: "hidden",
|
|
position: "relative",
|
|
flex: 1,
|
|
padding: theme.spacing(4),
|
|
...sx,
|
|
}}
|
|
>
|
|
<Box
|
|
position="absolute"
|
|
top="-10%"
|
|
left="5%"
|
|
>
|
|
<Background />
|
|
</Box>
|
|
{children}
|
|
</BaseBox>
|
|
);
|
|
};
|
|
|
|
const StatusBox = ({
|
|
label,
|
|
n,
|
|
color,
|
|
sx,
|
|
}: {
|
|
label: string;
|
|
n: number;
|
|
color: string | undefined;
|
|
sx?: SxProps;
|
|
}) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<BGBox sx={sx}>
|
|
<Stack spacing={theme.spacing(4)}>
|
|
<Typography
|
|
variant={"h2"}
|
|
textTransform="uppercase"
|
|
color={theme.palette.text.secondary}
|
|
>
|
|
{label}
|
|
</Typography>
|
|
<Typography
|
|
variant="h1"
|
|
color={color}
|
|
>
|
|
{n}
|
|
</Typography>
|
|
</Stack>
|
|
</BGBox>
|
|
);
|
|
};
|
|
|
|
export const UpStatusBox = ({ n }: { n: number }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
return (
|
|
<StatusBox
|
|
label={t("pages.common.monitors.status.up")}
|
|
n={n}
|
|
color={theme.palette.success.light}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const DownStatusBox = ({ n }: { n: number }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
return (
|
|
<StatusBox
|
|
label={t("pages.common.monitors.status.down")}
|
|
n={n}
|
|
color={theme.palette.error.light}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const PausedStatusBox = ({ n }: { n: number }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
return (
|
|
<StatusBox
|
|
label={t("pages.common.monitors.status.paused")}
|
|
n={n}
|
|
color={theme.palette.warning.light}
|
|
/>
|
|
);
|
|
};
|
|
export const TotalChecksBox = ({ n }: { n: number }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
return (
|
|
<StatusBox
|
|
label={t("pages.common.monitors.status.total")}
|
|
n={n}
|
|
color={theme.palette.primary.light}
|
|
/>
|
|
);
|
|
};
|
|
export const DownChecksBox = ({ n }: { n: number }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
return (
|
|
<StatusBox
|
|
label={t("pages.common.monitors.status.down")}
|
|
n={n}
|
|
color={theme.palette.error.light}
|
|
/>
|
|
);
|
|
};
|
|
export const UpChecksBox = ({ n }: { n: number }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
return (
|
|
<StatusBox
|
|
label={t("pages.common.monitors.status.up")}
|
|
n={n}
|
|
color={theme.palette.success.light}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const InitializingStatusBox = ({ n }: { n: number }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
return (
|
|
<StatusBox
|
|
label={t("pages.common.monitors.status.initializing")}
|
|
n={n}
|
|
color={theme.palette.warning.light}
|
|
/>
|
|
);
|
|
};
|