|
- import React from "react";
-
- // @material-ui/core components
- import { makeStyles } from "@material-ui/core/styles";
-
- // component
- 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);
-
- const DataLatestNews = function ({ backend, news, ...props }) {
- const classes = useStyles();
- const latnews = news.map((data) => {
- return (
- <Card style={{width: "20rem"}}>
- <img
- style={{height: "180px", width: "100%", display: "block"}}
- className={classes.imgCardTop}
- src={`${backend}${data.img[0]["url"]}`}
- />
- <CardBody>
- {/* <h4 className={classes.cardTitle}>{data.title}</h4> */}
- <p>{data.title}</p>
- <Button color="info" onclick="myFunction()" id="myBtn">Read More</Button>
- </CardBody>
- </Card>
- );
- })
- return (
- <div className={classes.section} id="notifications">
- <div align="center">
- <h2>Latest News</h2>
- </div>
- <div>
- <GridContainer justify="center">
- <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
- {latnews[0]}
- {latnews[1]}
- </Grid>
- <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
- {latnews[2]}
- {latnews[3]}
- </Grid>
- <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
- {latnews[4]}
- {latnews[5]}
- </Grid>
- </GridContainer>
- </div>
- <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>
- );
- }
-
- export default DataLatestNews;
|