92 lines
2.5 KiB
React
92 lines
2.5 KiB
React
import PropTypes from "prop-types";
|
|
import { useTheme } from "@emotion/react";
|
|
import { Box, Button, Stack, Typography } from "@mui/material";
|
|
import Skeleton from "../../assets/Images/create-placeholder.svg?react";
|
|
import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
|
|
import Background from "../../assets/Images/background-grid.svg?react";
|
|
import Check from "../Check/Check";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useSelector } from "react-redux";
|
|
import "./index.css";
|
|
|
|
/**
|
|
* Fallback component to display a fallback UI with a title, a list of checks, and a navigation button.
|
|
*
|
|
* @param {Object} props - The component props.
|
|
* @param {string} props.title - The title to be displayed in the fallback UI.
|
|
* @param {Array<string>} props.checks - An array of strings representing the checks to display.
|
|
* @param {string} [props.link="/"] - The link to navigate to.
|
|
*
|
|
* @returns {JSX.Element} The rendered fallback UI.
|
|
*/
|
|
|
|
const Fallback = ({ title, checks, link = "/", isAdmin }) => {
|
|
const theme = useTheme();
|
|
const navigate = useNavigate();
|
|
const mode = useSelector((state) => state.ui.mode);
|
|
|
|
return (
|
|
<Stack
|
|
className={`fallback__${title.trim().split(" ")[0]}`}
|
|
alignItems="center"
|
|
gap={theme.spacing(20)}
|
|
>
|
|
{mode === "light" ? (
|
|
<Skeleton style={{ zIndex: 1 }} />
|
|
) : (
|
|
<SkeletonDark style={{ zIndex: 1 }} />
|
|
)}
|
|
<Box
|
|
className="background-pattern-svg"
|
|
sx={{
|
|
"& svg g g:last-of-type path": {
|
|
stroke: theme.palette.border.light,
|
|
},
|
|
}}
|
|
>
|
|
<Background style={{ width: "100%" }} />
|
|
</Box>
|
|
<Stack
|
|
gap={theme.spacing(4)}
|
|
maxWidth={"275px"}
|
|
zIndex={1}
|
|
>
|
|
<Typography
|
|
component="h1"
|
|
marginY={theme.spacing(4)}
|
|
color={theme.palette.text.tertiary}
|
|
>
|
|
A {title} is used to:
|
|
</Typography>
|
|
{checks.map((check, index) => (
|
|
<Check
|
|
text={check}
|
|
key={`${title.trim().split(" ")[0]}-${index}`}
|
|
outlined={true}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
{/* TODO - display a different fallback if user is not an admin*/}
|
|
{isAdmin && (
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
sx={{ alignSelf: "center" }}
|
|
onClick={() => navigate(link)}
|
|
>
|
|
Let's create your {title}
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
Fallback.propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
checks: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
link: PropTypes.string,
|
|
isAdmin: PropTypes.bool,
|
|
};
|
|
|
|
export default Fallback;
|