42 lines
1012 B
TypeScript
42 lines
1012 B
TypeScript
import Box from "@mui/material/Box";
|
|
import { BaseBox } from "@/Components/v2/DesignElements";
|
|
import type { MonitorStatus } from "@/Types/Monitor";
|
|
|
|
import { getStatusPalette } from "@/Utils/MonitorUtils";
|
|
import { useTheme } from "@mui/material/styles";
|
|
|
|
export const StatusLabel = ({
|
|
status,
|
|
isActive,
|
|
}: {
|
|
status: MonitorStatus;
|
|
isActive?: boolean;
|
|
}) => {
|
|
const theme = useTheme();
|
|
const palette = getStatusPalette(status);
|
|
const transformedText = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
|
|
|
|
return (
|
|
<BaseBox
|
|
sx={{
|
|
display: "inline-flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: theme.spacing(3, 5),
|
|
color: theme.palette[palette].main,
|
|
borderColor: theme.palette[palette].lowContrast,
|
|
}}
|
|
>
|
|
<Box
|
|
width={7}
|
|
height={7}
|
|
bgcolor={theme.palette[palette].lowContrast}
|
|
borderRadius="50%"
|
|
marginRight="5px"
|
|
/>
|
|
{isActive === false ? "Paused" : transformedText}
|
|
</BaseBox>
|
|
);
|
|
};
|