import React from 'react' import { CardActionArea, CardContent, CardMedia, Typography } from '@material-ui/core' import { makeStyles } from '@material-ui/core/styles' const useStyles = makeStyles(() => ({ linkImage: { backgroundColor: '#eee', }, linkTitle: { height: `${8 / 3}em`, WebkitLineClamp: 2, textOverflow: 'ellipsis', overflow: 'hidden', }, linkUrl: { height: `${3 * 1.43}em`, wordBreak: 'break-word', WebkitLineClamp: 3, textOverflow: 'ellipsis', overflow: 'hidden', }, })) const LinkContent = ({ image, title, url, }) => { const classes = useStyles() return ( <CardActionArea component="a" href={url} rel="noreferrer noopener" target="_blank" > <CardMedia component="img" height="256" image={image} alt={title} title={title} className={classes.linkImage} /> <CardContent> <Typography gutterBottom variant="h5" component="h2" className={classes.linkTitle} > {title} </Typography> <Typography variant="body2" color="textSecondary" component="p" className={classes.linkUrl} > {url} </Typography> </CardContent> </CardActionArea> ) } export default LinkContent