Checkmate/client/src/Components/v2/design-elements/StatusBox.tsx

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}
		/>
	);
};