trampa-frontend/src/layouts/ProfileLayout/ProfileLayout.js

import React from "react";
import PropTypes from "prop-types";
import { Content, RightCard, ProfileLayoutContainer, HeaderCard, MiddleCard } from "./ProfileLayout.styled";
import { Grid } from "@mui/material";

const ProfileLayout = (props) => {
  return (
    <ProfileLayoutContainer>
      {props.children}
      <Grid container maxHeight maxWidth={1900}>
        <MiddleCard item xs={9.5} lg={6.5} xl={6.6} md={6}>
          <HeaderCard>
            {props.headerCard}
          </HeaderCard>
          <Content>
            {props.content}
          </Content>
        </MiddleCard>
        <RightCard item xs={2.5} lg={3} xl={3} md={3}>
            {props.rightCard}
        </RightCard>
      </Grid>
    </ProfileLayoutContainer>
  );
};

ProfileLayout.propTypes = {
  children: PropTypes.node,
  leftCard: PropTypes.node,
  content: PropTypes.node,
  rightCard: PropTypes.node,
  headerCard: PropTypes.node,
};

export default ProfileLayout;