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 67 68 69 70 71 | 25x 403x 403x 33x 370x 370x | import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import CustomPopover from "@common/Modal/Popover/CustomPopover";
import React from "react";
import { Box } from "@mui/material";
import { palette } from "@palette";
import { APP_BAR_HEIGHT } from "@constants/constants";
export type NotificationsCenterWrapperProps = {
anchorEl: HTMLButtonElement | null;
onClose: () => void;
children: React.ReactNode;
};
const NotificationsCenterWrapper = ({
anchorEl,
onClose,
children,
}: NotificationsCenterWrapperProps) => {
const { isMobileView } = useCustomTheme();
if (isMobileView) {
return (
<Box
sx={{
display: anchorEl ? "block" : "none",
width: "100vw",
height: "100vh",
zIndex: 1500,
backgroundColor: palette.background.dimmedWhite,
position: "fixed",
overflow: "hidden",
top: 0,
left: 0,
}}
>
{children}
</Box>
);
}
const windowHeight = window.innerHeight - APP_BAR_HEIGHT;
return (
<CustomPopover
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={onClose}
PopoverProps={{
anchorOrigin: {
vertical: "bottom",
horizontal: "right",
},
transformOrigin: {
vertical: "top",
horizontal: "right",
},
}}
PopoverSx={{
width: "460px",
minHeight: "452px",
maxHeight: `${Math.min(windowHeight, 824)}px`,
padding: "4px 0 0",
overflow: "hidden",
}}
>
{children}
</CustomPopover>
);
};
export default NotificationsCenterWrapper;
|