123 lines
4.8 KiB
JavaScript
123 lines
4.8 KiB
JavaScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import clsx from 'clsx';
|
|
import { loadCSS } from 'fg-loadcss';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import { red } from '@material-ui/core/colors';
|
|
import Icon from '@material-ui/core/Icon';
|
|
import Hidden from '@material-ui/core/Hidden';
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
root: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'flex-end',
|
|
},
|
|
iconHover: {
|
|
margin: theme.spacing(2),
|
|
'&:hover': {
|
|
color: red[800],
|
|
},
|
|
},
|
|
icon: {
|
|
margin: theme.spacing(1.5),
|
|
padding: theme.spacing(1.5),
|
|
borderRadius: '20px',
|
|
fontSize: '1em',
|
|
textAlign: 'center',
|
|
},
|
|
FacebookIcon: {
|
|
color: theme.palette.social.facebook,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.social.facebook,
|
|
color: '#fff',
|
|
}
|
|
},
|
|
TwitterIcon: {
|
|
color: theme.palette.social.twitter,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.social.twitter,
|
|
color: '#fff',
|
|
}
|
|
},
|
|
LinkedinIcon: {
|
|
color: theme.palette.social.linkedin,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.social.linkedin,
|
|
color: '#fff',
|
|
}
|
|
},
|
|
MailIcon: {
|
|
color: theme.palette.social.mail,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.social.mail,
|
|
color: '#fff',
|
|
}
|
|
},
|
|
FacebookIconMobile: {
|
|
color: theme.palette.social.facebook,
|
|
paddingRight:'0px',
|
|
paddingLeft:'3px'
|
|
},
|
|
TwitterIconMobile: {
|
|
color: theme.palette.social.twitter,
|
|
paddingRight:'3px' ,
|
|
paddingLeft:'3px'
|
|
},
|
|
LinkedinIconMobile: {
|
|
color: theme.palette.social.linkedin,
|
|
paddingRight:'3px',
|
|
paddingLeft:'3px'
|
|
},
|
|
MailIconMobile: {
|
|
color: theme.palette.social.mail,
|
|
paddingRight:'3px' ,
|
|
paddingLeft:'3px'
|
|
},
|
|
}));
|
|
|
|
export default function SocialShare(props) {
|
|
const classes = useStyles();
|
|
|
|
React.useEffect(() => {
|
|
loadCSS(
|
|
'https://use.fontawesome.com/releases/v5.1.0/css/all.css',
|
|
document.querySelector('#font-awesome-css'),
|
|
);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<Hidden smDown>
|
|
<a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
|
|
<Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')} />
|
|
</a>
|
|
<a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
|
|
<Icon className={clsx(classes.icon, classes.TwitterIcon, 'fab fa-twitter')} color="secondary" />
|
|
</a>
|
|
<a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talents Tube")} target="_blank">
|
|
<Icon className={clsx(classes.icon, classes.LinkedinIcon, 'fab fa-linkedin-in')} color="secondary" />
|
|
</a>
|
|
{/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
|
|
<a href={"mailto:?subject=Offre d'emploi Talents Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
|
|
<Icon className={clsx(classes.icon, classes.MailIcon, 'fas fa-envelope')} color="secondary" />
|
|
</a>
|
|
</Hidden>
|
|
<Hidden mdUp>
|
|
<a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
|
|
<Icon className={clsx(classes.icon, classes.FacebookIconMobile, 'fab fa-facebook-f')} />
|
|
</a>
|
|
<a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
|
|
<Icon className={clsx(classes.icon, classes.TwitterIconMobile, 'fab fa-twitter')} color="secondary" />
|
|
</a>
|
|
<a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talents Tube")} target="_blank">
|
|
<Icon className={clsx(classes.icon, classes.LinkedinIconMobile, 'fab fa-linkedin-in')} color="secondary" />
|
|
</a>
|
|
{/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
|
|
<a href={"mailto:?subject=Offre d'emploi Talents Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
|
|
<Icon className={clsx(classes.icon, classes.MailIconMobile, 'fas fa-envelope')} color="secondary" />
|
|
</a>
|
|
</Hidden>
|
|
</div>
|
|
);
|
|
} |