36 lines
1004 B
TypeScript
36 lines
1004 B
TypeScript
import { Breakpoint, Container, SxProps, Theme, useMediaQuery, useTheme } from "@mui/material";
|
|
import React, { ElementType } from "react";
|
|
|
|
|
|
interface Props {
|
|
component?: ElementType;
|
|
outerContainerSx?: SxProps<Theme>;
|
|
sx?: SxProps<Theme>;
|
|
maxWidth?: false | Breakpoint;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export default function SectionWrapper({ component, outerContainerSx: sx, sx: innerSx, children, maxWidth }: Props) {
|
|
const theme = useTheme();
|
|
const matchMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
|
|
return (
|
|
<Container
|
|
component={component || "div"}
|
|
maxWidth={false}
|
|
disableGutters
|
|
sx={sx}
|
|
>
|
|
<Container
|
|
disableGutters
|
|
maxWidth={maxWidth}
|
|
sx={{
|
|
px: matchMd ? "20px" : "18px",
|
|
...innerSx
|
|
}}
|
|
>
|
|
{children}
|
|
</Container>
|
|
</Container>
|
|
);
|
|
} |