qualiteer/src/views/Jobs.jsx

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: "fixed", 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>
  );
}