1  import { useEffect } from "react";
 2  import { Grid, styled, Box } from "@mui/material";
 3  import EmbeddingNew from "./components/EmbeddingNew";
 4  import Breadcrumb from "app/components/Breadcrumb";
 5  import { useTranslation } from "react-i18next";
 6  
 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  
20  export default function EmbeddingNewView() {
21    const { t } = useTranslation();
22    useEffect(() => {
23      document.title = (process.env.REACT_APP_RESTAI_NAME || "RESTai") + ' - ' + t("embeddings.newBreadcrumb");
24    }, [t]);
25  
26  
27    return (
28      <Container>
29        <Box className="breadcrumb">
30          <Breadcrumb routeSegments={[{ name: t("nav.embeddings"), path: "/embeddings" }, { name: t("embeddings.newBreadcrumb"), path: "/embedding/new" }]} />
31        </Box>
32  
33        <ContentBox className="analytics">
34          <Grid container spacing={3}>
35            <Grid item lg={12} md={8} sm={12} xs={12}>
36              <EmbeddingNew />
37            </Grid>
38          </Grid>
39        </ContentBox>
40      </Container>
41    );
42  }