59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import { Fab, Theme } from "@mui/material";
|
|
import { makeStyles } from "@mui/styles";
|
|
import AddBinIcon from "assets/products/bindapt/addBin.png";
|
|
import { ImgIcon } from "common/ImgIcon";
|
|
import { useMobile } from "hooks";
|
|
|
|
interface Props {
|
|
onClick: () => void;
|
|
pulse: boolean;
|
|
}
|
|
|
|
const useStyles = makeStyles((theme: Theme) => {
|
|
const yellow = "#ffea00";
|
|
return ({
|
|
"@keyframes pulsate": {
|
|
to: {
|
|
boxShadow: "0 0 0 16px" + yellow + "00"
|
|
}
|
|
},
|
|
fab: {
|
|
background: yellow,
|
|
"&:hover": {
|
|
background: yellow
|
|
},
|
|
"&:focus": {
|
|
background: yellow
|
|
},
|
|
position: "fixed",
|
|
bottom: theme.spacing(8), //for mobile navigator
|
|
right: theme.spacing(2),
|
|
[theme.breakpoints.up("sm")]: {
|
|
bottom: theme.spacing(2)
|
|
}
|
|
},
|
|
pulse: {
|
|
boxShadow: "0 0 0 0 " + yellow + "75",
|
|
animation: "$pulsate 1.75s infinite cubic-bezier(0.66, 0.33, 0, 1)"
|
|
}
|
|
});
|
|
});
|
|
|
|
export default function AddBinFab(props: Props) {
|
|
const { onClick, pulse } = props;
|
|
const classes = useStyles();
|
|
const isMobile = useMobile();
|
|
|
|
const pulseString = pulse ? classes.pulse : "";
|
|
const classString = classes.fab + " " + pulseString;
|
|
|
|
return (
|
|
<Fab
|
|
onClick={onClick}
|
|
aria-label="Create Bin"
|
|
className={classString}
|
|
size={isMobile ? "medium" : "large"}>
|
|
<ImgIcon alt="Create Bin" src={AddBinIcon} iconHeight={"35px"} iconWidth={"35px"}/>
|
|
</Fab>
|
|
);
|
|
}
|