Main.js

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import { Link } from 'react-router-dom';
import thumbImage from '../../img/thumb.png';

const styles = theme => ({
  root: {
    width: '100%',
    marginBottom: theme.spacing.unit,
    [ theme.breakpoints.up('md')]: {
      height: 'calc(100% - 150px)',
      overflow: 'auto',
    },
  },
  icon: {
    marginRight: theme.spacing.unit * 2,
  },
  // heroUnit: {
  //   backgroundColor: 'rgb(238, 238, 238)'
  // },
  heroContent: {
    maxWidth: 1100,
    paddingTop: theme.spacing.unit * 3,
    paddingBottom: theme.spacing.unit
  },
  layout: {
    width: 'auto',
    marginLeft: theme.spacing.unit * 3,
    marginRight: theme.spacing.unit * 3,
    [theme.breakpoints.up(1100 + theme.spacing.unit * 3 * 2)]: {
      width: 1100,
      marginLeft: 'auto',
      marginRight: 'auto',
    },
  },
  media: {
    height: 100,
    [ theme.breakpoints.down('md')]: {
      height: 60
    }
  },
  cardContent: {
    height: 85,
  }
});

let Main = props => {
  const { classes } = props;
  const perspectives = [
    {
      id: 'manuscripts',
      label: 'Manuscripts',
      desc: 'Physical manuscript objects.'
    },
    {
      id: 'works',
      label: 'Works',
      desc: 'Intellectual content carried out by manuscripts.'
    },
    {
      id: 'events',
      label: 'Events',
      desc: 'Events related to manuscripts.'
    },
    {
      id: 'people',
      label: 'People',
      desc: 'People related to manuscripts and works.'
    },
    {
      id: 'organizations',
      label: 'Organizations',
      desc: 'Organizations related to manuscripts.'
    },
    {
      id: 'places',
      label: 'Places',
      desc: 'Places related to manuscripts and works.'
    },
  ];

  return (
    <div className={classes.root}>
      <div className={classes.layout}>
        <div className={classes.heroContent}>
          <Typography component="h1" variant="h3" align="center" color="textPrimary" gutterBottom>
              Mapping Manuscript Migrations
          </Typography>
          <Typography variant="h6" align="center" color="textSecondary" paragraph>
            MMM is a semantic portal for finding and studying pre-modern manuscripts and their movements,
            based on linked collections of  Schoenberg Institute, Bodleian Library, and IRHT.
            Select an application view below.
          </Typography>
        </div>
      </div>
      <div className={classNames(classes.layout, classes.cardGrid)}>
        <Grid container spacing={40}>
          {perspectives.map(perspective =>
            <Grid key={perspective.id} item xs={12} sm={6} md={4}>
              <Card className={classes.card}>
                <CardActionArea component={Link} to={`/${perspective.id}`}>
                  <CardMedia
                    className={classes.media}
                    image={thumbImage}
                    title={perspective.label}
                  />
                  <CardContent className={classes.cardContent}>
                    <Typography gutterBottom variant="h5" component="h2">
                      {perspective.label}
                    </Typography>
                    <Typography component="p">
                      {perspective.desc}
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Card>
            </Grid>
          )}
        </Grid>
      </div>
    </div>
  );
};

Main.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Main);