tbg-ecomm-nextjs/pages-sections/latest_news/news.js

import React from 'react';

import { makeStyles } from "@material-ui/core/styles";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import Grid from '@material-ui/core/Grid';
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import Button from "components/CustomButtons/Button.js";
import Paginations from "components/Pagination/Pagination.js";
import Icon from "@material-ui/core/Icon";

const useStyles = makeStyles(styles);

const DataLatestNews = function ({ backend, news, ...props }) {
  const classes = useStyles();
  const latnews = news.map((data) => {
    return (
    <Grid align="center" style={{padding:"30px", marginTop:"-50px"}}>
      <Card style={{width: "20rem"}}>
        <img
          style={{height: "180px", width: "100%", display: "block"}}
          className={classes.imgCardTop}
          src={`${backend}${data.img[0]["url"]}`}
        />
        <CardBody>
          <p>{data.title}</p>
          <Button color="info" round href={"/latestnews_details?s="+data.id}>
            <Icon className={classes.icons}>open_in_new</Icon>Read More
          </Button>
        </CardBody>
      </Card>
    </Grid>
    );
  })
  return (
    <div className={classes.section} id="notifications">
      <div align="center">
          <h2>Latest News</h2>
      </div>
      <div>
        <GridContainer justify="center">
          {latnews}
        </GridContainer>
      </div>
      <div align="center">
        <Paginations
          pages={[
            { text: "PREV" },
            { text: 1 },
            { text: 2 },
            { active: true, text: 3 },
            { text: 4 },
            { text: 5 },
            { text: "NEXT" }
          ]}
          color="info"
        />
      </div>
    </div>
  );
}

export default DataLatestNews;