text: import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import {Card, Button, CardActionArea, CardMedia, CardContent, CardActions, Typography} from '@material-ui/core';
  
  const useStyles = makeStyles({
      root: {
        maxWidth: 345,
      },
      media: {
        height: 140,
      },
  });
  
  export default function BeritaCard(props) {
      const classes = useStyles();
  
      return (
          <Card className={classes.root}>
              <CardActionArea>
                  <CardMedia
                      className={classes.media}
                      image={props.data.image}
                      title="Contemplative Reptile"
                  />
                  <CardContent>
                      <Typography gutterBottom variant="body2" component="h2">
                          {props.data.judul}
                      </Typography>
                      <Typography variant="body2" color="textSecondary" component="p">
                          Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
                          across all continents except Antarctica
                      </Typography>
                  </CardContent>
              </CardActionArea>
              <CardActions>
                  <Button size="small" color="primary">
                      Share
                  </Button>
                  <Button size="small" color="primary">
                      Selengkapnya
                  </Button>
              </CardActions>
          </Card>
      );
  }
  