diligent-next/components/cards/data-card/DataCard.jsx

import { Divider, Paper, Typography } from '@mui/material';
import PropType from 'prop-types';

const DataCard = ({ data, t }) => {
  return (
    <Paper sx={{ p: 3, height: '100%' }} elevation={3}>
      <Typography sx={{ fontWeight: 600 }}>{t('Name')}</Typography>
      <Typography display="inline"> {data.name}</Typography>
      <Divider />
      <Typography sx={{ fontWeight: 600 }}>{t('Age')}</Typography>
      <Typography display="inline"> {data.age}</Typography>
      <Divider />
      <Typography sx={{ fontWeight: 600 }}>{t('Gender')}</Typography>
      <Typography display="inline"> {data.gender}</Typography>
      <Divider />
    </Paper>
  );
};

DataCard.propTypes = {
  data: PropType.shape({
    name: PropType.string,
    age: PropType.number,
    gender: PropType.string,
  }),
  t: PropType.func,
};

export default DataCard;