Card.jsx

import {
  Card,
  Typography,
  CardHeader,
  Button,
  Avatar,
} from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles((theme) => ({
  card: {
    '&.MuiCard-root': {
      padding: theme.spacing(1),
      margin: theme.spacing(2),
      marginTop: theme.spacing(8),
      overflow: 'initial',
    },
  },
  header: {
    '& .MuiAvatar-root': {
      marginTop: -theme.spacing(12),
      paddingTop: theme.spacing(3),
      width: theme.spacing(32),
      height: theme.spacing(18),
      boxShadow: theme.shadows[6],
      backgroundColor: (props) =>
        props.color === 'warning'
          ? theme.palette.warning.light
          : props.color === 'error'
          ? theme.palette.error.light
          : props.color === 'success'
          ? theme.palette.success.light
          : theme.palette.grey[500],
    },
  },
}))

const AvatarCard = ({
  avatarColor,
  avatarContent,
  titleContent,
  handleClick,
}) => {
  const classes = useStyles({ color: avatarColor })
  return (
    <Card elevation={4} className={classes.card}>
      <Button onClick={() => handleClick(titleContent)}>
        <CardHeader
          className={classes.header}
          avatar={
            <Avatar variant="square">
              <Typography variant="h3" align="center" color='textPrimary'>
                {avatarContent}
              </Typography>
            </Avatar>
          }
          title={titleContent}
          titleTypographyProps={{ variant: 'h5',align:'right' }}
        />
      </Button>
    </Card>
  )
}

export default AvatarCard