All files / src/pages/RadicalCollaboration PhotoCardMobile.js

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
 
 
 
 
 
 
 
 
 
 
 
 
61x
8x
8x
 
8x
 
 
32x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* eslint-disable react/jsx-key */
import React from 'react';
import { Grid } from "@material-ui/core";
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import useStyles from './styles.js';
 
const PhotoCardMobile = (props) => {
  const items = props.items;
  const classes = useStyles();
 
  return (
    <>
      {items.map((i) => {
        return (
          <Grid item xs={12} lg={4} className={classes.innerTextCardContainerMobile} align='center' >
            <Card className={classes.innerCardMobile} >
              <CardActionArea>
                <CardMedia className={classes.cardMediaMobile}>
                  <img className={classes.mobileImg} src={i.src} alt={i.alt} />
                </CardMedia>
                <CardContent>
                  <Typography className={classes.mobileCardHeading} gutterBottom variant="h4">
                    {i.heading}
                  </Typography>
                  <Typography variant="h6" className={classes.mobileParaHeading}>
                    {i.subHeading}
                  </Typography>
                  <br></br>
                  <Typography className={classes.mobileParaText}>
                    {i.textBody}
                  </Typography>
                  <Typography variant="h6" >
                    {i.footerText}
                  </Typography>
                </CardContent>
              </CardActionArea>
              <CardActions className={classes.mobileCardActions}>
                <Button className={classes.mobileButton}>
                  {i.buttonText}
                </Button>
              </CardActions>
            </Card>
          </Grid>
        )
      })}
    </>
  );
}
 
export default PhotoCardMobile;