83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import { Container, SxProps, Theme } from "@mui/material";
|
|
import { makeStyles } from "@mui/styles";
|
|
import classNames from "classnames";
|
|
// import { useMobile } from "hooks";
|
|
import { PropsWithChildren } from "react";
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
pageContainer: {
|
|
width: "100%",
|
|
overflowX: "hidden",
|
|
overflowY: "auto",
|
|
// height: `calc(100vh - 112px)`,
|
|
// [theme.breakpoints.up("sm")]: {
|
|
// height: `calc(100vh - 64px)`
|
|
// }
|
|
minHeight: 0,
|
|
height: `calc(100vh - 112px)`,
|
|
"@supports (height: 100dvh)": {
|
|
height: `calc(100dvh - 112px)`
|
|
},
|
|
[theme.breakpoints.up("sm")]: {
|
|
height: `calc(100vh - 64px)`,
|
|
|
|
"@supports (height: 100dvh)": {
|
|
height: `calc(100dvh - 64px)`
|
|
}
|
|
}
|
|
},
|
|
fullViewportContainer: {
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
height: "100vh",
|
|
width: "100vw",
|
|
backgroundColor: theme.palette.background.default,
|
|
zIndex: 2000,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
centerCenter: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
}
|
|
}))
|
|
|
|
interface Props extends PropsWithChildren{
|
|
fullViewport?: boolean;
|
|
isCenterCenter?: boolean;
|
|
sx?: SxProps<Theme>;
|
|
spacing?: number;
|
|
}
|
|
|
|
export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
|
|
const classes = useStyles();
|
|
// const isMobile = useMobile();
|
|
const { children, fullViewport, isCenterCenter, sx } = props;
|
|
// let fullViewport = false
|
|
// let isCenterCenter = false
|
|
const spacing = props.spacing ?? 0;
|
|
return (
|
|
<Container
|
|
className={classNames(
|
|
fullViewport ? classes.fullViewportContainer : classes.pageContainer,
|
|
isCenterCenter && classes.centerCenter
|
|
)}
|
|
sx={{
|
|
...sx, // Spread existing sx
|
|
paddingX: spacing,
|
|
marginTop: spacing
|
|
// ...(padding !== undefined && { padding }), // Conditionally add padding
|
|
}}
|
|
disableGutters
|
|
maxWidth={false}
|
|
children={<>{children}</>}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default PageContainer;
|