Savepoint

src/views/Jobs.jsx

@@ -0,0 +1,55 @@
+import { useState, useContext } from "react";
+import StoreContext from "../ctx/StoreContext.jsx";
+import JobContext from "../ctx/JobContext.jsx";
+
+
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import SpeedDial from '@mui/material/SpeedDial';
+import SpeedDialAction from '@mui/material/SpeedDialAction';
+import SpeedDialIcon from '@mui/material/SpeedDialIcon';
+
+import PageviewIcon from '@mui/icons-material/Pageview';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import ViewCarouselIcon from '@mui/icons-material/ViewCarousel';
+
+export default function Jobs() {
+  const {
+    state: jobState,
+    dispatch: jobDispatch,
+    jobUpdate,
+    jobCreate,
+  } = useContext(JobContext);
+
+  const { state: store, updateStore } = useContext(StoreContext);
+
+  const [quickOpen, setQuickOpen] = useState(false);
+
+  const quickOpenClick = () => setQuickOpen(!quickOpen);
+  const quickOpenClose = () => setQuickOpen(false);
+  
+  const actions = [
+    {name: "Suite", icon: <ViewCarouselIcon/>}, {name: "Compound", icon: <ViewColumnIcon/>}, {name: "Manual", icon: <PageviewIcon/>}
+  ]
+  
+  return (
+    <div className="jobs">
+    <ClickAwayListener onClickAway={quickOpenClose}>
+      <SpeedDial
+        ariaLabel="New Job"
+        sx={{ position: 'absolute', bottom: 16, right: 16 }}
+        icon={<SpeedDialIcon />}
+        onClick={quickOpenClick}
+        open={quickOpen}
+      >
+        {actions.map((action) => (
+          <SpeedDialAction
+            key={action.name}
+            icon={action.icon}
+            tooltipTitle={action.name}
+          />
+        ))}
+      </SpeedDial>
+    </ClickAwayListener>
+    </div>
+  );
+}