diligent-next-ts/components/cards/data-details-card/DataDetailsCard.tsx

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import Image from 'next/image';

interface IProps {
  data: {
    name: string;
    age: number;
  };
}
const DataDetailsCard: React.FC<IProps> = ({ data }) => {
  return (
    <Card
      sx={{
        maxWidth: 600,
        height: 200,
        marginX: 'auto',
        marginY: 20,
        boxShadow: 10,
        display: 'flex',
      }}
    >
      <Image
        src="https://www.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
        alt="profile picture"
        width={600}
        height={500}
      />
      <CardContent>
        <Typography
          gutterBottom
          variant="h5"
          component="div"
          sx={{
            textAlign: 'center',
            marginTop: 1,
            marginBottom: 3,
          }}
        >
          {data.name}, {data.age}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          quis odio in libero fringilla pellentesque aliquet et mi. Quisque
          maximus lectus a neque luctus, tempus auctor ipsum ultrices.
        </Typography>
      </CardContent>
    </Card>
  );
};

export default DataDetailsCard;