Flatten

packages/leafcutter-common/components/GettingStartedDialog.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { FC, useState } from "react";
+import { Dialog, Box, Grid, Checkbox, IconButton } from "@mui/material";
+import { Close as CloseIcon } from "@mui/icons-material";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { useTranslate } from "react-polyglot";
+import { useAppContext } from "../../../apps/leafcutter/app/_components/AppProvider";
+
+type CheckboxItemProps = {
+  title: string;
+  description: string;
+  checked: boolean;
+  onChange: () => void;
+};
+
+const CheckboxItem: FC<CheckboxItemProps> = ({
+  title,
+  description,
+  checked,
+  onChange,
+}) => {
+  const {
+    typography: { p, small },
+  } = useAppContext();
+
+  return (
+    <Grid item container spacing={0}>
+      <Grid
+        item
+        container
+        spacing={0}
+        sx={{ backgroundColor: "white" }}
+        wrap="nowrap"
+      >
+        <Grid item xs={1}>
+          <Checkbox checked={checked} onChange={onChange} sx={{ mt: "-8px" }} />
+        </Grid>
+        <Grid
+          item
+          container
+          direction="column"
+          spacing={0}
+          xs={11}
+          sx={{ pl: 2 }}
+        >
+          <Grid item>
+            <Box sx={{ ...p, fontWeight: "bold" }}>{title}</Box>
+          </Grid>
+          <Grid item>
+            <Box sx={small}>{description}</Box>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export const GettingStartedDialog: FC = () => {
+  const {
+    colors: { almostBlack },
+    typography: { h4 },
+  } = useAppContext();
+  const t = useTranslate();
+  const router = useRouter();
+  const [completedItems, setCompletedItems] = useState([] as any[]);
+  const searchParams = useSearchParams();
+  const pathname = usePathname() ?? "";
+  const open = searchParams?.get("tooltip")?.toString() === "checklist";
+  const toggleCompletedItem = (item: any) => {
+    if (completedItems.includes(item)) {
+      setCompletedItems(completedItems.filter((i) => i !== item));
+    } else {
+      setCompletedItems([...completedItems, item]);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      maxWidth="xs"
+      PaperProps={{
+        sx: { position: "absolute", bottom: 8, right: 8, borderRadius: 3 },
+      }}
+      hideBackdrop
+      disableEnforceFocus
+      disableAutoFocus
+      onBackdropClick={undefined}
+    >
+      <Grid container direction="column" spacing={2} sx={{ p: 3 }}>
+        <Grid item>
+          <Grid container direction="row" justifyContent="space-between">
+            <Grid item>
+              <Box sx={{ ...h4, mb: 3 }}>{t("getStartedChecklist")}</Box>
+            </Grid>
+            <Grid item>
+              <IconButton onClick={() => router.push(pathname ?? "")}>
+                <CloseIcon sx={{ color: almostBlack, fontSize: "18px" }} />
+              </IconButton>
+            </Grid>
+          </Grid>
+          <Grid container direction="column" spacing={2}>
+            <CheckboxItem
+              title={t("searchTitle")}
+              description={t("searchDescription")}
+              checked={completedItems.includes("search")}
+              onChange={() => toggleCompletedItem("search")}
+            />
+            <CheckboxItem
+              title={t("createVisualizationTitle")}
+              description={t("createVisualizationDescription")}
+              checked={completedItems.includes("create")}
+              onChange={() => toggleCompletedItem("create")}
+            />
+            <CheckboxItem
+              title={t("saveTitle")}
+              description={t("saveDescription")}
+              checked={completedItems.includes("save")}
+              onChange={() => toggleCompletedItem("save")}
+            />
+            <CheckboxItem
+              title={t("exportTitle")}
+              description={t("exportDescription")}
+              checked={completedItems.includes("export")}
+              onChange={() => toggleCompletedItem("export")}
+            />
+            <CheckboxItem
+              title={t("shareTitle")}
+              description={t("shareDescription")}
+              checked={completedItems.includes("share")}
+              onChange={() => toggleCompletedItem("share")}
+            />
+          </Grid>
+        </Grid>
+      </Grid>
+    </Dialog>
+  );
+};