diligent-next-ts/components/cards/data-card/DataCard.tsx

import { Divider, Paper, Typography } from '@mui/material';

interface IProps {
  data: {
    name: string;
    gender: string;
    age: number;
  };
  t: (x: string) => string;
}

const DataCard: React.FC<IProps> = ({ 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>
  );
};

export default DataCard;