News.tsx

import { Grid, makeStyles, Typography } from '@material-ui/core';
import React from 'react';

interface NewsProps {
  title: string;
  content: string;
  author: string;
  createDate: string;
}

const useStyles = makeStyles((theme) => ({
  container: {
    color: 'white',
    borderRadius: '8px',
    backgroundColor: theme.palette.background.paper,
    margin: theme.spacing(2),
    padding: theme.spacing(1),
  },
}));

const News: React.FC<NewsProps> = ({ title, content, author, createDate }) => {
  const classes = useStyles();
  return (
    <Grid className={classes.container} container direction="column">
      <Grid item>
        <Typography variant="h6">{title}</Typography>
      </Grid>
      <Grid item>
        <Typography variant="body1">{content}</Typography>
      </Grid>
      <Grid item container justify="flex-end">
        <Grid item>
          <Typography variant="subtitle2">
            <i>{author}</i>
          </Typography>
          <Typography variant="subtitle2">
            <i>{createDate}</i>
          </Typography>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default News;