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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | import React, { ReactNode } from "react";
import { Stack, SxProps } from "@mui/material";
import { Box } from "@mui/material";
type ChildProps = {
children: ReactNode;
alignItems?: string;
sx?: SxProps;
};
const ChildComponent: React.FC<ChildProps> = ({
children,
alignItems = "center",
...rest
}) => {
return (
<Stack
direction="row"
sx={{ padding: "12px" }}
justifyContent="space-between"
alignItems={alignItems}
{...rest}
>
{children}
</Stack>
);
};
const ActionComponent: React.FC<ChildProps> = ({ children, ...rest }) => {
return <Box {...rest}>{children}</Box>;
};
interface ModalLayoutProps {
header: ReactNode;
subHeader?: ReactNode;
main: ReactNode;
actionComponent: ReactNode;
mainStyle?: SxProps;
actionStyle?: SxProps;
searchInput?: ReactNode;
emptyState?: ReactNode;
emptyStateCondition?: boolean;
gap?: number;
}
const ModalLayout: React.FC<ModalLayoutProps> = ({
header,
subHeader,
main,
actionComponent,
mainStyle,
actionStyle,
searchInput,
emptyStateCondition,
emptyState,
gap = 2,
}) => {
return (
<>
<Stack gap={gap} flex={1}>
{header}
{searchInput && searchInput}
{emptyStateCondition ? (
<>{emptyState}</>
) : (
<>
{subHeader && (
<ChildComponent sx={{ padding: "8px" }}>
{subHeader}
</ChildComponent>
)}
<ChildComponent sx={{ ...mainStyle, overflowY: "scroll" }}>
{main}
</ChildComponent>
</>
)}
</Stack>
<ActionComponent sx={{ ...actionStyle }}>
{actionComponent}
</ActionComponent>
</>
);
};
export default ModalLayout;
|