app/nextjs/components/organisms/CompanyRow.js

import React from 'react';
import PropTypes from "prop-types";
import Router from 'next/router'
import getConfig from 'next/config'
import { withStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import Chip from '@material-ui/core/Chip';
import IconText from './../atoms/IconText';
import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';
import Link from 'next/link';

const { publicRuntimeConfig } = getConfig()

const styles = theme => ({
  card: {
    display: 'flex',
    position: 'relative',
    height: '67vh',
    width: '100%',
    cursor: 'pointer',
    transform: 'translateY(-0px)',
    transition: 'transform 0.25s',
    '&:hover': {
      transform: 'translateY(-15px)',
      transition: 'transform 0.5s, box-shadow 1.2s',
      '& .cardHover': {
        backgroundColor: 'rgba(0,0,0,0)',
      },
    },

    [theme.breakpoints.up('md')]: {
      width: '30%',
      height: '53vh',
    },
    [theme.breakpoints.down('md')]: {
      width: '40%',
      height: '67vh',
    },
    [theme.breakpoints.down('xs')]: {
      width: '100%',
    },

    margin: theme.spacing(1.5),
    marginBottom: theme.spacing(3),
    [theme.breakpoints.up('sm')]: {
      margin: theme.spacing(2, 0),
    },
    borderRadius: '4px',
  },
  detailsContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%',
    paddingTop: theme.spacing(6),
  },
  companyTitle: {
    textAlign: 'center',
    fontSize: '1em',
    fontWeight: '500',
    minHeight: '5vh',
    padding: theme.spacing(0,1.5),
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    width: '100%',
    padding: 0,
  },
  cover: {
    width: '100%',
    height: '50%',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    position: 'relative',
    backgroundBlendMode: 'darken',
    backgroundColor: 'rgba(30,35,39,0.25)',
    transition: 'background-color 1s',
  },
  logoContainer: {
    display: 'flex',
    alignItems: 'center',
    width: 85,
    height: 85,
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%, -66%)',
    border: 'solid 5px white',
    backgroundColor: 'white',
    boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
    borderRadius: '6px',
  },
  iconTextContainer: {
    width: '100%',
  },
  iconText: {
    marginLeft: 0,
    padding: theme.spacing(2, 3),
    justifyContent: 'flex-start',
  },
  iconTextIcon: {
    color: theme.palette.offerlistitem.icon,
    fontSize: '1em',
  },
  iconTextText: {
    color: theme.palette.offerlistitem.text,
    fontSize: '0.8em',
    textTransform: 'capitalize',
    paddingLeft: theme.spacing(1),
  },
  iconPlay: {
    fontSize: '3em',
    color: theme.palette.background.grey,
    position: 'absolute',
    top: 'calc(50% - 0.5em)',
    left: 'calc(50% - 0.5em)',
  },
  logo: {
    width: '100%',
    height: 'auto',
    objectFit: 'contain',
    borderRadius: '0px',
  },
  chip: {
    margin: '0 1vh 0 1vh',
  }

});
class CompanyRowComponent extends React.Component {

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

    const imgDefaultUrl = "https://blog.talentstube.com/wp-content/uploads/2021/01/default_picture_company.jpg"

    const imgUrl = (rowData.presentation_video && rowData.presentation_video.thumbnails[0] && rowData.presentation_video.thumbnails[0].sizes[4]) ? rowData.presentation_video.thumbnails[0].sizes[4].link : imgDefaultUrl
    const logoUrl = publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + rowData.logo
    let location = "non renseigné"
    if (rowData.addresses && rowData.addresses.billing && rowData.addresses.billing.city && rowData.addresses.billing.postcode)
      location = (rowData.addresses.billing.city.toLowerCase() + ', ' + rowData.addresses.billing.postcode);

    const offre = (rowData.count_ads == 1) ? rowData.count_ads + ' offre' : rowData.count_ads + ' offres';
    const nbOffre = (rowData.count_ads > 0) ? offre : 'Candidature spontanée';

    return (
      <Link href={`/Entreprise/${rowData.id}-${_.kebabCase(rowData.brand_name)}`} >
        <Card className={classes.card + ' cypCardCompany'}>
          <CardContent className={classes.content}>
            <CardMedia
              className={classes.cover + ' cardHover'}
              image={imgUrl}
              title={rowData.brand_name}
            >
              <KeyboardArrowleftIcon className={classes.iconPlay} />
            </CardMedia>
            <div className={classes.logoContainer}>
              <Avatar className={classes.logo} src={logoUrl} alt="companylogo" />
            </div>

            <div className={classes.detailsContainer}>
              <Typography
                variant="headline"
                variant="h6"
                component="h3"
                className={classes.companyTitle}>
                {rowData.brand_name}
              </Typography>
              <div className={classes.iconTextContainer}>
                <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={location} />
              </div>
            </div>
            <Chip color="primary" label={nbOffre} className={classes.chip} />
          </CardContent>
        </Card>
      </Link>
    );
  }
}

CompanyRowComponent.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
  rowData: PropTypes.object.isRequired
};

export default withStyles(styles, { withTheme: true })(CompanyRowComponent);