1 files changed, 90 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/CardPaper/VideoCard.js b/front/odiparpack/app/components/CardPaper/VideoCard.js
new file mode 100644
index 0000000..69aa60c
--- /dev/null
+++ b/front/odiparpack/app/components/CardPaper/VideoCard.js
@@ -0,0 +1,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);