Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 61x | import React from 'react';
import { Grid } from "@material-ui/core";
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
import Typography from '@material-ui/core/Typography';
import useStyles from './styles.js';
const DonateCardDesktop = (props) => {
const items = props.items;
const classes = useStyles();
return (
<>
{items.map((i) => {
let card;
if (i.title === 'img-1') {
card = <div>
<Grid item>
<Paper elevation={0} className={classes.innerTextCardContainer}>
<Typography className={classes.cardHeading} gutterBottom variant='h4'>
{i.heading}
</Typography>
<Typography variant="h6" className={classes.cardParaHeading}>
{i.subHeading}
</Typography>
<br></br>
<Typography className={classes.dtpLine1}>
{i.dsktpTxtLn1}
</Typography>
<Typography className={classes.dtpLine2}>
{i.dsktpTxtLn2}
</Typography>
<Typography className={classes.dtpLine3}>
{i.dsktpTxtLn3}
</Typography>
<Typography variant="h6" className={classes.footerTxt}>
{i.footerText}
</Typography>
<Button component={Link} to="/donate" className={classes.donateButton}>
{i.buttonText}
</Button>
</Paper>
</Grid>
<Grid item >
<Card className={classes.imgCard}>
<CardMedia
className={classes.cardMedia}
image={i.src}
/>
</Card>
</Grid>
</div>
}
return (
<Grid container className={classes.gridCont} align='center' key='#' >
<Card className={classes.outerCard}>
{card}
</Card>
</Grid>
)
})}
</>
);
}
export default DonateCardDesktop;
|