1  import { styled, Box } from "@mui/material";
 2  import Breadcrumb from "app/components/Breadcrumb";
 3  import ImageChatContainer from "./components/ImageChatContainer";
 4  import useAuth from "app/hooks/useAuth";
 5  import { useState, useEffect } from "react";
 6  import api from "app/utils/api";
 7  
 8  const Container = styled("div")(({ theme }) => ({
 9    margin: 10,
10    [theme.breakpoints.down("sm")]: { margin: 16 },
11    "& .breadcrumb": { marginBottom: 30, [theme.breakpoints.down("sm")]: { marginBottom: 16 } }
12  }));
13  
14  const ContentBox = styled("div")(({ theme }) => ({
15    margin: "30px",
16    [theme.breakpoints.down("sm")]: { margin: "16px" }
17  }));
18  
19  export default function Image() {
20    const auth = useAuth();
21    const [generators, setGenerators] = useState([]);
22  
23    useEffect(() => {
24      document.title = (process.env.REACT_APP_RESTAI_NAME || "RESTai") + " - Image Generation";
25      api.get("/image", auth.user.token)
26        .then((d) => setGenerators(d.generators))
27        .catch(() => {});
28    }, []);
29  
30    return (
31      <Container>
32        <Box className="breadcrumb">
33          <Breadcrumb routeSegments={[{ name: "Image", path: "/image" }]} />
34        </Box>
35  
36        <ContentBox>
37          <ImageChatContainer generators={generators} />
38        </ContentBox>
39      </Container>
40    );
41  }