149 lines
3.9 KiB
JavaScript
149 lines
3.9 KiB
JavaScript
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 Chip from '@material-ui/core/Chip';
|
|
import CardContent from '@material-ui/core/CardContent';
|
|
import CardHeader from '@material-ui/core/CardHeader';
|
|
import CardMedia from '@material-ui/core/CardMedia';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import { Button } from '@material-ui/core';
|
|
|
|
const styles = theme => ({
|
|
card: {
|
|
display: 'flex',
|
|
position: 'relative',
|
|
height: '50vh',
|
|
width: '100%',
|
|
|
|
[theme.breakpoints.up('md')]: {
|
|
width : '30%',
|
|
},
|
|
[theme.breakpoints.down('md')]: {
|
|
width : '40%',
|
|
},
|
|
[theme.breakpoints.down('xs')]: {
|
|
width : '100%',
|
|
},
|
|
|
|
margin: '1vh 2vh 1vh 2vh',
|
|
[theme.breakpoints.up('sm')]: {
|
|
margin: '1vh 0 1vh 0',
|
|
},
|
|
borderRadius: 0
|
|
},
|
|
details_container: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: '8vh 0 0 0',
|
|
},
|
|
company_title: {
|
|
fontSize: '1em',
|
|
fontWeight: 'normal',
|
|
textTransform: 'uppercase',
|
|
},
|
|
content: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
flexWrap: 'wrap',
|
|
width: '100%',
|
|
padding: 0,
|
|
},
|
|
cover: {
|
|
width: '100%',
|
|
height: '50%',
|
|
backgroundSize: 'cover',
|
|
backgroundRepeat: 'no-repeat',
|
|
},
|
|
logo_container: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: 100,
|
|
height: 100,
|
|
position: 'absolute',
|
|
left: '50%',
|
|
top: '50%',
|
|
transform: 'translate(-50%, -66%)',
|
|
backgroundColor: 'white',
|
|
boxShadow: '0 8px 6px -6px grey',
|
|
},
|
|
logo: {
|
|
width: '100%',
|
|
height: 'auto',
|
|
objectfit: 'contain',
|
|
borderRadius: 0,
|
|
},
|
|
chip: {
|
|
margin: '0 1vh 0 1vh',
|
|
}
|
|
|
|
});
|
|
|
|
const { publicRuntimeConfig } = getConfig()
|
|
class OffreRowComponent extends React.Component {
|
|
|
|
render() {
|
|
|
|
const { classes, theme, rowData } = this.props;
|
|
|
|
const imgDefaultUrl = "https://www.talentstube.com/img/default_picture_company.svg"
|
|
|
|
const imgUrl = (rowData.video.thumbnails[0] && rowData.video.thumbnails[0].sizes[4]) ? rowData.video.thumbnails[0].sizes[4].link : imgDefaultUrl
|
|
const logoUrl = publicRuntimeConfig.logoUrl + rowData.company.logo
|
|
//rowData._embedded.company.business_name
|
|
return (
|
|
|
|
<Card className={classes.card} onClick={() => Router.push(`/Offre?id=${rowData.id}`)}>
|
|
<CardContent className={classes.content}>
|
|
<CardMedia
|
|
className={classes.cover}
|
|
image={imgUrl}
|
|
title={rowData.title}
|
|
/>
|
|
|
|
<div className={classes.logo_container}>
|
|
<Avatar className={classes.logo} src={logoUrl} />
|
|
</div>
|
|
|
|
<div className={classes.details_container}>
|
|
<Typography
|
|
gutterBottom
|
|
variant="headline"
|
|
variant="h6"
|
|
component="h4"
|
|
align="center"
|
|
className={classes.company_title}>
|
|
{rowData.company.business_name}
|
|
</Typography>
|
|
<Typography
|
|
gutterBottom
|
|
variant="headline"
|
|
variant="h6"
|
|
component="h3"
|
|
align="center"
|
|
className={classes.job_title}>
|
|
{rowData.title}
|
|
</Typography>
|
|
</div>
|
|
<div>
|
|
<Chip label={rowData.extra.contract_type} className={classes.chip} />
|
|
<Chip label={rowData.location.gmap_address.address_components[0].long_name} className={classes.chip} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
}
|
|
|
|
OffreRowComponent.propTypes = {
|
|
classes: PropTypes.object.isRequired,
|
|
theme: PropTypes.object.isRequired,
|
|
rowData: PropTypes.object.isRequired
|
|
};
|
|
|
|
export default withStyles(styles, { withTheme: true })(OffreRowComponent); |