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 65 66 | 1x 1x 1x 1x | import { WithTooltipWrapper } from "@common/Menu/NewDropdownMenu";
import { Stack, styled, StackProps } from "@mui/material";
import { palette } from "@palette";
export const CustomToolbar = styled(Stack)(({ theme }) => ({
gap: "12px",
flexDirection: "row",
alignItems: "center",
boxShadow: "0px 3px 15px 0px rgba(2, 2, 2, 0.15)",
padding: "0 16px",
borderRadius: "100px",
backgroundColor: palette.liftedWhite[100],
[theme.breakpoints.down("sm")]: {
background: palette.black[100],
backdropFilter: "blur(2px)",
},
}));
const CircleButton = styled(Stack, {
shouldForwardProp: (prop) => prop !== "disabled",
})<{ disabled?: boolean }>(({ disabled, theme }) => ({
cursor: disabled ? "default" : "pointer",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
padding: "10px",
width: "48px",
height: "48px",
borderRadius: "100px",
backgroundColor: palette.liftedWhite[100],
boxShadow: "0px 3px 15px 0px rgba(2, 2, 2, 0.15)",
userSelect: "none",
opacity: disabled ? 0.3 : 1,
[theme.breakpoints.down("sm")]: {
backgroundColor: palette.black[100],
boxShadow: "0px 3.5px 17.5px 0px rgba(2, 2, 2, 0.15)",
width: "56px",
height: "56px",
padding: 0,
position: "absolute",
right: "24px",
},
}));
export const SingleActionButton = ({
tooltipProps,
disabled = false,
onClick,
...props
}: StackProps & {
tooltipProps?: { show: boolean; message: string };
disabled?: boolean;
}) => {
const handleClick = (e: any) => {
if (disabled || !onClick) return;
else onClick(e);
};
return (
<WithTooltipWrapper hasTooltip={!!tooltipProps} tooltipProps={tooltipProps}>
<CircleButton {...props} onClick={handleClick} disabled={disabled} />
</WithTooltipWrapper>
);
};
|