tbg-ecomm-nextjs/pages-sections/Components-Sections/SectionLatestNews.js

import React from "react";

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

// component
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import Clearfix from "components/Clearfix/Clearfix.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import Paper from '@material-ui/core/Paper';
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";

const useStyles = makeStyles(styles);

export default function SectionNotifications() {
  const classes = useStyles();
  return (
    <div className={classes.section} id="notifications">
      <SnackbarContent
        message={
          <span>
            <b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. 
          </span>
        }
        align="center"
        color="danger"
        icon="info_outline"
      />
      <Clearfix />
      <div align="center">
          <h2>Latest News</h2>
      </div>
      <GridContainer justify="center">
        <Grid align="center" style={{padding:"5px"}}>
          <Paper className={classes.paper}>
            <Card style={{width: "20rem"}}>
              <img
                style={{height: "180px", width: "100%", display: "block"}}
                className={classes.imgCardTop}
                src="https://www.yamaha-motor.co.id/uploads/content/2021012915132285551O25635.jpg"
              />
              <CardBody>
                <h4 className={classes.cardTitle}>Dance Seru sambil Menang Banyak? Yuk...</h4>
                <p>Jakarta – Let’s Gear Up! PT Yamaha Indonesia Motor Manufacturing (PT YIMM) mengajak para generasi muda...</p>
                <Button color="info">Read More</Button>
              </CardBody>
            </Card>
          </Paper>
        </Grid>        
        <Grid align="center" style={{padding:"5px"}}>
          <Paper className={classes.paper}>
            <Card style={{width: "20rem"}}>
              <img
                style={{height: "180px", width: "100%", display: "block"}}
                className={classes.imgCardTop}
                src="https://www.yamaha-motor.co.id/uploads/content/2021012810494925493U23162.jpg"
                alt="Card-img-cap"
              />
              <CardBody>
                <h4 className={classes.cardTitle}>Makin Agresif, Ini Warna Baru MT-25 !</h4>
                <p>Makin Agresif, Ini Warna Baru MT-25 ! Yamaha gencar melakukan penyegaran produk-produknya...</p>
                <Button color="info">Read More</Button>
              </CardBody>
            </Card>
          </Paper>
        </Grid>
        <Grid align="center" style={{padding:"5px"}}>
          <Paper className={classes.paper}>
            <Card style={{width: "20rem"}}>
              <img
                style={{height: "180px", width: "100%", display: "block"}}
                className={classes.imgCardTop}
                src="https://www.yamaha-motor.co.id/uploads/content/2021012716374767982G99280.jpg"
                alt="Card-img-cap"
              />
              <CardBody>
                <h4 className={classes.cardTitle}>Awal Tahun 2021, Yamaha Fino 125 Sporty Tampil... </h4>
                <p>Jakarta – Melanjutkan penyegaran warna baru pada Yamaha Fino 125 Premium sebelumnya, kini saatnya...</p>
                <Button color="info">Read More</Button>
              </CardBody>
            </Card>
          </Paper>
        </Grid>
        <Grid align="center" style={{padding:"5px"}}>
          <Paper className={classes.paper}>
            <Card style={{width: "20rem"}}>
              <img
                style={{height: "180px", width: "100%", display: "block"}}
                className={classes.imgCardTop}
                src="https://www.yamaha-motor.co.id/uploads/content/2021011912521629671C71533.jpg"
                alt="Card-img-cap"
              />
              <CardBody>
                <h4 className={classes.cardTitle}>Ini Warna Baru Yamaha R15 !</h4>
                <p>Tahun 2021 baru bergulir, Yamaha sudah memanjakan konsumen dengan melansir warna teranyar...</p>
                <Button color="info">Read More</Button>
              </CardBody>
            </Card>
          </Paper>
        </Grid>        
        <Grid align="center" style={{padding:"5px"}}>
          <Paper className={classes.paper}>
            <Card style={{width: "20rem"}}>
              <img
                style={{height: "180px", width: "100%", display: "block"}}
                className={classes.imgCardTop}
                src="https://www.yamaha-motor.co.id/uploads/content/202101141322331084Z7315.jpg"
                alt="Card-img-cap"
              />
              <CardBody>
                <h4 className={classes.cardTitle}>Awal Tahun 2021, MX King 150 Warna Baru Meluncur </h4>
                <p>Awal tahun 2021 ini dibuka Yamaha dengan merilis warna baru MX King 150 yang kian menonjolkan tampilan...</p>
                <Button color="info">Read More</Button>
              </CardBody>
            </Card>
          </Paper>
        </Grid>
        <Grid align="center" style={{padding:"5px"}}>
          <Paper className={classes.paper}>
            <Card style={{width: "20rem"}}>
              <img
                style={{height: "180px", width: "100%", display: "block"}}
                className={classes.imgCardTop}
                src="https://www.yamaha-motor.co.id/uploads/content/2020121515490320942H80353.jpg"
                alt="Card-img-cap"
              />
              <CardBody>
                <h4 className={classes.cardTitle}>Semakin Sporty, Yamaha Luncurkan All New...</h4>
                <p>Jakarta – Sebagai wujud apresiasi terhadap pecinta MotoGP di Indonesia dan semangat sportifitas MotoGP...</p>
                <Button color="info">Read More</Button>
              </CardBody>
            </Card>
          </Paper>
        </Grid>
      </GridContainer>
      <div align="center">
      <Paginations
        color="info"
        pages={[
          { text: 1 },
          { text: "..." },
          { text: 5 },
          { text: 6 },
          { active: true, text: 7 },
          { text: 8 },
          { text: 9 },
          { text: "..." },
          { text: 12 }
        ]}
      />
      </div>
    </div>
  );
}