MemberCard.tsx

import { Box, Typography } from '@material-ui/core';
import React from 'react';
import { IStaff } from '../types/Profile';

const MemberCard: React.FC<IStaff> = ({ name, email, acceptedPicture, staffMemberText }) => {
  return (
    <Box
      bgcolor="#1A6B97"
      width="320px"
      height="300px"
      display="flex"
      flexDirection="column"
      alignItems="center"
      paddingTop={8}
      paddingBottom={4}
      borderRadius={2}
      position="relative"
    >
      <Box
        width="320px"
        height="140px"
        bgcolor="#202020"
        position="absolute"
        top={0}
        left={0}
      />
      <Box
        overflow="hidden"
        width={128}
        height={128}
        bgcolor="white"
        borderRadius="50%"
        marginBottom={2}
        border="solid 2px #202020"
        position="relative"
        zIndex={1000}
        display="flex"
        justifyContent="center"
        alignItems="center"
      >
        <img src={acceptedPicture} alt="Profile" height={128} />
      </Box>
      <Box marginBottom={1}>
        <Typography variant="h4" color="textPrimary">
          {name}
        </Typography>
      </Box>
      <Box>
        <Typography color="textPrimary">{staffMemberText}</Typography>
      </Box>
      <Box display="flex" flexDirection="column-reverse" flex={1}>
        <Typography color="textPrimary">{email}</Typography>
      </Box>
    </Box>
  );
};

export default MemberCard;