1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import { red } from '@material-ui/core/colors';
import { Card, CardHeader, CardMedia, IconButton, Avatar } from '@material-ui/core';
const styles = theme => ({
playIcon: {
height: 38,
width: 38,
},
cardSocmed: {
maxWidth: 400,
},
media: {
height: 0,
paddingTop: '56.25%', // 16:9
position: 'relative',
},
avatar: {
backgroundColor: red[500],
},
playBtn: {
position: 'absolute',
top: '50%',
left: '50%',
width: 64,
height: 64,
transform: 'translate(-50%, -50%)',
'& svg': {
color: theme.palette.common.white,
fontSize: 64
}
}
});
class VideoCard extends React.Component {
state = { expanded: false };
handleExpandClick = () => {
this.setState({ expanded: !this.state.expanded });
};
render() {
const {
classes,
title,
cover,
date
} = this.props;
return (
<Card className={classes.cardSocmed}>
<CardMedia
className={classes.media}
image={cover}
title={title}
>
<IconButton className={classes.playBtn}><PlayArrowIcon /></IconButton>
</CardMedia>
<CardHeader
avatar={(
<Avatar aria-label="Recipe" className={classes.avatar}>
R
</Avatar>
)}
action={(
<IconButton>
<MoreVertIcon />
</IconButton>
)}
title={title}
subheader={date}
/>
</Card>
);
}
}
VideoCard.propTypes = {
classes: PropTypes.object.isRequired,
title: PropTypes.string.isRequired,
cover: PropTypes.string.isRequired,
date: PropTypes.string.isRequired,
};
export default withStyles(styles)(VideoCard);
|
