import React from "react" ; import { withStyles } from "@material-ui/core/styles" ; import Card from "@material-ui/core/Card" ; import CardActionArea from "@material-ui/core/CardActionArea" ; import CardActions from "@material-ui/core/CardActions" ; import CardContent from "@material-ui/core/CardContent" ; import CardMedia from "@material-ui/core/CardMedia" ; import Button from "@material-ui/core/Button" ; import Typography from "@material-ui/core/Typography" ; const styles = { card : { } , media : { height : 140 } } ; function MediaCard ( props ) { const { classes , image , headline , index , description , isMoving } = props ; return ( < a onClick = { ( e ) => { e . preventDefault ( ) ; } } href = 'https://w3js.com' target = "_blank" > < Card className = { classes . card } > < CardActionArea > < CardMedia className = { classes . media } image = { image } title = { headline } / > < CardContent > < Typography gutterBottom variant = "h5" component = "h2" > { index } < /Typography> < Typography component = "p" > { description } < /Typography> < /CardContent> < /CardActionArea> < CardActions > < Button size = "small" color = "primary" > Share < /Button> < Button size = "small" color = "primary" > Learn More < /Button> < /CardActions> < /Card> < /a>); } export default withStyles ( styles ) ( MediaCard ) ;