78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import Box from "@mui/material/Box";
|
|
import { BaseBox } from "@/components/design-elements";
|
|
import Background from "@/assets/images/background-grid.svg?react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { useTheme } from "@mui/material/styles";
|
|
|
|
type StatusBoxProps = React.PropsWithChildren<{ children: React.ReactNode }>;
|
|
|
|
export const BGBox: React.FC<StatusBoxProps> = ({ children }) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<BaseBox
|
|
sx={{
|
|
overflow: "hidden",
|
|
position: "relative",
|
|
flex: 1,
|
|
padding: theme.spacing(4),
|
|
}}
|
|
>
|
|
<Box position="absolute" top="-10%" left="5%">
|
|
<Background />
|
|
</Box>
|
|
{children}
|
|
</BaseBox>
|
|
);
|
|
};
|
|
|
|
const StatusBox = ({
|
|
label,
|
|
n,
|
|
color,
|
|
}: {
|
|
label: string;
|
|
n: number;
|
|
color: string | undefined;
|
|
}) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<BGBox>
|
|
<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("monitorStatus.up")} n={n} color={theme.palette.success.light} />;
|
|
};
|
|
|
|
export const DownStatusBox = ({ n }: { n: number }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
return <StatusBox label={t("monitorStatus.down")} n={n} color={theme.palette.error.light} />;
|
|
};
|
|
|
|
export const PausedStatusBox = ({ n }: { n: number }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
return <StatusBox label={t("monitorStatus.paused")} n={n} color={theme.palette.warning.light} />;
|
|
};
|
|
|
|
export const InitializingStatusBox = ({ n }: { n: number }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
return <StatusBox label={t("monitorStatus.initializing")} n={n} color={theme.palette.warning.light} />;
|
|
};
|