Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 3x 3x | import { MinusIcon, PlusIcon, SearchIconFilled } from "@assets/icons";
import { StyledIconButton } from "@common/IconButton";
import { Stack, styled } from "@mui/material";
import { palette } from "@palette";
import { ZoomDirection, ZoomHandler } from "../types";
interface IZoomControlsProps {
onZoom: ZoomHandler;
onMouseEnterAndLeave?: (value?: boolean) => void;
disabled: Record<ZoomDirection, boolean>;
}
export const ZoomControls = ({
onZoom,
onMouseEnterAndLeave = () => null,
disabled,
}: IZoomControlsProps) => {
const icon: Record<ZoomDirection, JSX.Element> = {
out: <MinusIcon width={22} stroke={palette.gray[300]} />,
in: <PlusIcon width={22} height={22} fill={palette.gray[300]} />,
};
return (
<Stack direction="row" gap={1} alignItems="center" paddingBlock="12px">
<IconButton
data-testid="minus-icon"
disabled={disabled["out"]}
onClick={() => onZoom("out")}
onMouseEnter={() => onMouseEnterAndLeave(true)}
onMouseLeave={() => onMouseEnterAndLeave(false)}
>
{icon["out"]}
</IconButton>
<SearchIconFilled />
<IconButton
data-testid="plus-icon"
disabled={disabled["in"]}
onClick={() => onZoom("in")}
onMouseEnter={() => onMouseEnterAndLeave(true)}
onMouseLeave={() => onMouseEnterAndLeave(false)}
>
{icon["in"]}
</IconButton>
</Stack>
);
};
const IconButton = styled(StyledIconButton)(({ disabled }) => ({
width: "24px !important",
height: "24px !important",
padding: "0 !important",
borderRadius: "100px",
background: "inherit",
userSelect: "none",
"&:disabled": {
pointerEvents: "auto",
},
"&:hover": {
backgroundColor: disabled ? "none" : palette.liftedWhite[200],
...(disabled && {
cursor: "default",
}),
},
}));
|