PNSPS-frontend-MaterialUI/src/components/MainCard.js

import PropTypes from 'prop-types';
import { forwardRef } from 'react';
import omit from 'lodash/omit';

// material-ui
import { useTheme } from '@mui/material/styles';
import { Card, CardContent, CardHeader, Divider, Typography, Grid } from '@mui/material';

// project import
import Highlighter from './third-party/Highlighter';

/** Props often mistaken for Card / Grid / sx — must not reach the underlying DOM node via `{...others}`. */
const PROPS_OMIT_FROM_CARD = [
  'backgroundColor',
  'bgcolor',
  'xs',
  'sm',
  'md',
  'lg',
  'xl',
  'item',
  'container',
  'spacing',
  'direction',
  'justify',
  'alignItems',
  'alignContent',
  'flexWrap',
  'wrap',
  'zeroMinWidth',
  'rowSpacing',
  'columnSpacing'
];

// header style
const headerSX = {
  p: 2.5,
  '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' }
};

// ==============================|| CUSTOM - MAIN CARD ||============================== //

const MainCard = forwardRef(
  (
    {
      border = true,
      boxShadow,
      children,
      content = true,
      contentSX = {},
      darkTitle,
      elevation,
      secondary,
      shadow,
      sx = {},
      title,
      codeHighlight,
      ...others
    },
    ref
  ) => {
    const theme = useTheme();
    boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow;

    const cardProps = omit(others, PROPS_OMIT_FROM_CARD);

    return (
      <Grid container direction="column"
        // alignItems="center"
        // justify="center"
      >
        <Card
          elevation={elevation || 0}
          ref={ref}
          {...cardProps}
          sx={{
            alignItems: "center",
            border: border ? '1px solid' : 'none',
            borderRadius: 2,
            borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
            boxShadow: boxShadow && (!border || theme.palette.mode === 'dark') ? shadow || theme.customShadows.z1 : 'inherit',
            ':hover': {
              boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit'
            },
            '& pre': {
              m: 0,
              p: '16px !important',
              fontFamily: theme.typography.fontFamily,
              fontSize: '0.75rem'
            },
            // maxWidth: { xs: 700, sm: 900, md: 1000, lg: 1300, xl: 1850 },
            // minWidth: { xs: 600, sm: 800, md: 900, lg: 1000, xl: 1000 },
            margin: { xs: 2, md: 2 },
            // '& > *': {
            //   flexGrow: 1,
            //   flexBasis: '50%'
            // },
            ...sx
          }}
        >
          {/* card header and action */}
          {!darkTitle && title && (
            <CardHeader sx={headerSX} titleTypographyProps={{ variant: 'subtitle1' }} title={title} action={secondary} />
          )}
          {darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h3">{title}</Typography>} action={secondary} />}

          {/* card content */}
          {content && <CardContent sx={contentSX}>{children}</CardContent>}
          {!content && children}

          {/* card footer - clipboard & highlighter  */}
          {codeHighlight && (
            <>
              <Divider sx={{ borderStyle: 'dashed' }} />
              <Highlighter codeHighlight={codeHighlight} main>
                {children}
              </Highlighter>
            </>
          )}
        </Card></Grid>
    );
  }
);

MainCard.propTypes = {
  border: PropTypes.bool,
  boxShadow: PropTypes.bool,
  contentSX: PropTypes.object,
  darkTitle: PropTypes.bool,
  divider: PropTypes.bool,
  elevation: PropTypes.number,
  secondary: PropTypes.node,
  shadow: PropTypes.string,
  sx: PropTypes.object,
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  codeHighlight: PropTypes.bool,
  content: PropTypes.bool,
  children: PropTypes.node
};

export default MainCard;