選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

71 行
2.4 KiB

  1. import React from 'react';
  2. import { makeStyles } from "@material-ui/core/styles";
  3. import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
  4. import Grid from '@material-ui/core/Grid';
  5. import GridContainer from "components/Grid/GridContainer.js";
  6. import Card from "components/Card/Card.js";
  7. import CardBody from "components/Card/CardBody.js";
  8. import Button from "components/CustomButtons/Button.js";
  9. import Paginations from "components/Pagination/Pagination.js";
  10. import Icon from "@material-ui/core/Icon";
  11. import CardHeader from "components/Card/CardHeader.js";
  12. const useStyles = makeStyles(styles);
  13. const DataLatestNews = function ({ backend, news, ...props }) {
  14. const classes = useStyles();
  15. const latnews = news.map((data) => {
  16. return (
  17. <Grid align="center" style={{padding:"30px", marginTop:"-50px"}}>
  18. <Card style={{width: "20rem"}}>
  19. <img
  20. style={{height: "180px", width: "100%", display: "block"}}
  21. className={classes.imgCardTop}
  22. src={`${backend}${data.img[0]["url"]}`}
  23. />
  24. <CardBody>
  25. <p>{data.title}</p>
  26. <p>{data.published_at}</p>
  27. <Button color="info" round href={"/hino/latest_news/latestnews_details?s="+data.id}>
  28. <Icon className={classes.icons}>open_in_new</Icon>Read More
  29. </Button>
  30. </CardBody>
  31. </Card>
  32. </Grid>
  33. );
  34. })
  35. return (
  36. <Card className={classes.textCenter}>
  37. <div align="center">
  38. <CardHeader color="info">News</CardHeader>
  39. </div>
  40. <CardBody>
  41. <div align="center">
  42. <h2>Latest News</h2>
  43. </div>
  44. <GridContainer justify="center">
  45. {latnews}
  46. </GridContainer>
  47. </CardBody>
  48. <div align="center">
  49. <Paginations
  50. pages={[
  51. { text: "PREV" },
  52. { text: 1 },
  53. { text: 2 },
  54. { active: true, text: 3 },
  55. { text: 4 },
  56. { text: 5 },
  57. { text: "NEXT" }
  58. ]}
  59. color="info"
  60. />
  61. </div>
  62. </Card>
  63. );
  64. }
  65. export default DataLatestNews;