1  import { Box, Button, styled } from "@mui/material";
 2  import { useNavigate } from "react-router-dom";
 3  
 4  const FlexBox = styled(Box)({
 5    display: "flex",
 6    alignItems: "center"
 7  });
 8  
 9  const JustifyBox = styled(FlexBox)({
10    maxWidth: 600,
11    flexDirection: "column",
12    justifyContent: "center"
13  });
14  
15  const IMG = styled("img")({
16    width: "100%",
17    marginBottom: "32px"
18  });
19  
20  const NotFoundRoot = styled(FlexBox)({
21    width: "100%",
22    alignItems: "center",
23    justifyContent: "center",
24    height: "100vh !important"
25  });
26  
27  export default function NotFound() {
28    const navigate = useNavigate();
29  
30    return (
31      <NotFoundRoot>
32        <JustifyBox>
33          <IMG src="/admin/assets/images/ai404.jpg" alt="" style={{borderRadius:"10%"}}/>
34  
35          <Button
36            color="primary"
37            variant="contained"
38            sx={{ textTransform: "capitalize" }}
39            onClick={() => navigate(-1)}>
40            Go Back
41          </Button>
42        </JustifyBox>
43      </NotFoundRoot>
44    );
45  }