60 lines
1.5 KiB
React
60 lines
1.5 KiB
React
import { Box, Button, Stack, Typography } from "@mui/material";
|
||
import { useTheme } from "@emotion/react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { useSelector } from "react-redux";
|
||
import PlaceholderLight from "../../../assets/Images/data_placeholder.svg?react";
|
||
import PlaceholderDark from "../../../assets/Images/data_placeholder_dark.svg?react";
|
||
import PropTypes from "prop-types";
|
||
|
||
const Fallback = ({ isAdmin }) => {
|
||
const theme = useTheme();
|
||
const navigate = useNavigate();
|
||
const mode = useSelector((state) => state.ui.mode);
|
||
|
||
return (
|
||
<Stack
|
||
alignItems="center"
|
||
backgroundColor={theme.palette.background.main}
|
||
p={theme.spacing(30)}
|
||
pt={theme.spacing(25)}
|
||
gap={theme.spacing(2)}
|
||
border={1}
|
||
borderRadius={theme.shape.borderRadius}
|
||
borderColor={theme.palette.border.light}
|
||
color={theme.palette.text.secondary}
|
||
>
|
||
<Box pb={theme.spacing(20)}>
|
||
{mode === "light" ? <PlaceholderLight /> : <PlaceholderDark />}
|
||
</Box>
|
||
<Typography
|
||
component="h2"
|
||
variant="h2"
|
||
fontWeight={500}
|
||
>
|
||
No monitors found to display
|
||
</Typography>
|
||
<Typography variant="body1">
|
||
It looks like you don’t have any monitors set up yet.
|
||
</Typography>
|
||
{isAdmin && (
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
onClick={() => {
|
||
navigate("/monitors/create");
|
||
}}
|
||
sx={{ mt: theme.spacing(12) }}
|
||
>
|
||
Create your first monitor
|
||
</Button>
|
||
)}
|
||
</Stack>
|
||
);
|
||
};
|
||
|
||
Fallback.propTypes = {
|
||
isAdmin: PropTypes.bool,
|
||
};
|
||
|
||
export default Fallback;
|