App directory #3

apps/leafcutter/app/(main)/create/_components/Create.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { FC, useEffect } from "react";
+import { useTranslate } from "react-polyglot";
+import { useRouter, usePathname } from "next/navigation";
+import { Box, Grid } from "@mui/material";
+import { useCookies } from "react-cookie";
+import { useAppContext } from "@/app/_components/AppProvider";
+import { PageHeader } from "@/app/_components/PageHeader";
+import { VisualizationBuilder } from "@/app/_components/VisualizationBuilder";
+
+type CreateProps = {
+  templates: any;
+};
+
+export const Create: FC<CreateProps> = ({ templates }) => {
+  const t = useTranslate();
+  const {
+    colors: { cdrLinkOrange },
+    typography: { h1, h4 },
+  } = useAppContext();
+  const router = useRouter();
+  const pathname = usePathname();
+  const cookieName = "searchIntroComplete";
+  const [cookies, setCookie] = useCookies([cookieName]);
+  const searchIntroComplete = parseInt(cookies[cookieName], 10) || 0;
+
+  useEffect(() => {
+    if (searchIntroComplete === 0) {
+      setCookie(cookieName, `${1}`, { path: "/" });
+      router.push(`${pathname}?group=search&tooltip=1&checklist=1`);
+    }
+  }, [searchIntroComplete, router, setCookie]);
+
+  return (
+    <>
+      <PageHeader backgroundColor={cdrLinkOrange}>
+        <Grid container direction="row" spacing={2} alignItems="center">
+          {/*           <Grid item xs={2} sx={{ textAlign: "center" }}>
+            <Image src={SearchCreateHeader} width={100} height={100} alt="" />
+          </Grid> */}
+          <Grid container direction="column" item xs={10}>
+            <Grid item>
+              <Box component="h1" sx={{ ...h1 }}>
+                {t("searchAndCreateTitle")}
+              </Box>
+            </Grid>
+            <Grid item>
+              <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
+                {t("searchAndCreateSubtitle")}
+              </Box>
+            </Grid>
+            {/*      <Grid>
+              <Box component="p" sx={{ ...p }}>
+                {t("searchAndCreateDescription")}
+              </Box>
+            </Grid> */}
+          </Grid>
+        </Grid>
+      </PageHeader>
+      <VisualizationBuilder templates={templates} />
+    </>
+  );
+};
+