AG2L-pwa/components/Footer.js

import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Hidden from '@material-ui/core/Hidden';
import CardMedia from '@material-ui/core/CardMedia';
import LocalPhone from '@material-ui/icons/LocalPhone';
import LocationOn from '@material-ui/icons/LocationOn';
import Security from '@material-ui/icons/Security';
import Mail from '@material-ui/icons/Mail';
import { withStyles } from '@material-ui/core/styles';
import Link from 'next/link'
import { truncate } from 'lodash'
import Social from './social.js'
import WhatshotIcon from '@material-ui/icons/Whatshot';
import dynamic from 'next/dynamic'
import ButtonBase from "@material-ui/core/ButtonBase";
import Router from 'next/router'
import { Fragment } from 'react';

const PWAInstallSnack = dynamic(() => import('./PWAInstallSnack.js'), {
  ssr: false
});
const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.secondary.main,
    color: theme.palette.secondary.main,
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    width: 'calc( 100% - theme.spacing.unit*2)'
  },
  grid: {
    display: 'flex',
    width: '99%',
    margin: 0
  },

  paper: {
    display: 'flex',
    flexDirection: 'column',
    padding: theme.spacing.unit * 2,
    textAlign: 'center'
  },
  pointer: {
    cursor: 'pointer'
  },
  item: {

    margin: theme.spacing.unit * 2,
    minWidth: '200px',
    maxHeight: '300px',

  },
  icon: {
    fontSize: '64px',
    margin: 'auto',
    textAlign: 'center'

  },
  card: {
    display: 'flex',
  },
  cardDetails: {
    flex: 1,

  },
  cardMedia: {
    objectFit: 'cover',
    width: 150,
    height: 150
  },
  link: {
    cursor: 'pointer'
  },

  image: {
    position: 'relative',
    height: 200,
    [theme.breakpoints.down('xs')]: {
      width: '100% !important', // Overrides inline-style
      height: 100,
    },
    '&:hover, &$focusVisible': {
      zIndex: 1,
      '& $imageBackdrop': {
        opacity: 0.15,
      },
      '& $imageMarked': {
        opacity: 0,
      },
      '& $imageTitle': {
        border: '4px solid currentColor',
      },
    },
  },
  focusVisible: {},
  imageButton: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: theme.palette.common.white,
  },
  imageSrc: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    backgroundSize: 'cover',
    backgroundPosition: 'center 40%',
  },
  imageBackdrop: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    backgroundColor: theme.palette.common.black,
    opacity: 0.4,
    transition: theme.transitions.create('opacity'),
  },
  imageTitle: {
    position: 'relative',
    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 4}px ${theme.spacing.unit + 6}px`,
  },
  imageMarked: {
    height: 3,
    width: 18,
    backgroundColor: theme.palette.common.white,
    position: 'absolute',
    bottom: -2,
    left: 'calc(50% - 9px)',
    transition: theme.transitions.create('opacity'),
  },
  social: {
    margin: 'auto'
  }
});

class Footer extends React.Component {

  render() {
    const { classes, show } = this.props;

    return (
      <div className={classes.root}>

        <Grid container className={classes.grid} spacing={16}>
          <Grid item xs={12} md={12}>
            <Grid container className={classes.demo} justify="center" spacing={16}>
              <Grid item className={classes.item}>
                <PWAInstallSnack >
                  {({ initInstall }) =>

                    <Button
                      aria-label='install' variant="contained" color="primary" onClick={initInstall}>
                      <WhatshotIcon ></WhatshotIcon>
                      <Typography variant="h6" color="inherit">
                        Instaler l'app
                    </Typography>
                    </Button>

                  }
                </PWAInstallSnack>
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={12} md={12}>
            <Grid container className={classes.demo} justify="center" spacing={16}>
              <Grid item className={classes.item}>
                <Paper className={classes.paper} >
                  <a href="https://goo.gl/maps/mE4X4Xm4i5L2" target="_blank" rel="noopener">
                    <LocationOn className={classes.icon} />
                  </a>
                  <Typography variant="h5" gutterBottom>e-declic Auray</Typography>
                </Paper>
              </Grid>
              <Grid item className={classes.item}>

                <ButtonBase
                  name='contact'
                  focusRipple
                  key={'image.title'}
                  className={classes.image}
                  focusVisibleClassName={classes.focusVisible}
                  style={{
                    width: 200, height: 140
                  }}
                  onClick={() => Router.push('/contact')}
                >
                  <span
                    className={classes.imageSrc}

                  />
                  <span className={classes.imageBackdrop} />
                  <span className={classes.imageButton}>

                    <Typography
                      component="span"
                      variant="h5"
                      color="inherit"
                      className={classes.imageTitle}
                    >
                      <Mail className={classes.icon + ' ' + classes.link} />
                      <span className={classes.imageMarked} />
                    </Typography>
                  </span>
                </ButtonBase>
              </Grid>


              <Grid item className={classes.item}>
                <Paper className={classes.paper} >
                  <LocalPhone className={classes.icon} />
                  <Link href={"tel:+33297290060"} ><a>
                    <Typography variant="h5" gutterBottom>+33.(0)297 290 060</Typography>
                  </a></Link>
                </Paper>
              </Grid>
              <Grid item className={classes.item}>
                <Paper className={classes.paper} >
                  <Social className={classes.icon} delay='1000' svgWidth='64'></Social>
                  <Typography variant="h5" gutterBottom>Nous Suivre</Typography>
                </Paper>
              </Grid>
              

            </Grid>
          </Grid>
        </Grid>
      </div>
    )
  }
}

export default withStyles(styles)(Footer)