1 files changed, 81 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Quote/Quote.js b/front/odiparpack/app/components/Quote/Quote.js
new file mode 100644
index 0000000..21665d5
--- /dev/null
+++ b/front/odiparpack/app/components/Quote/Quote.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { blueGrey } from '@material-ui/core/colors';
+import { Typography } from '@material-ui/core';
+
+const styles = ({
+  quoteWrap: {
+    padding: '0 25',
+    margin: 10,
+    position: 'relative',
+    '&:before': {
+      color: blueGrey[100],
+      fontSize: '4em',
+      lineHeight: '.1em',
+      marginRight: '.25em',
+      verticalAlign: '-.4em'
+    }
+  },
+  quoteLeft: {
+    extend: 'quoteWrap',
+    textAlign: 'left',
+    borderLeft: '5px solid' + blueGrey[50],
+    paddingLeft: 25,
+    '&:before': {
+      content: 'open-quote',
+    }
+  },
+  quoteRight: {
+    extend: 'quoteWrap',
+    textAlign: 'right',
+    borderRight: '5px solid' + blueGrey[50],
+    paddingRight: 25,
+    '&:before': {
+      content: 'close-quote',
+    }
+  },
+  quoteBody: {
+    minHeight: 100,
+    marginBottom: 20
+  }
+});
+
+
+class Quote extends React.Component {
+  render() {
+    const {
+      align,
+      content,
+      footnote,
+      classes
+    } = this.props;
+    return (
+      <div
+        className={
+          classNames(
+            classes.quoteWrap,
+            align === 'right' ? classes.quoteRight : classes.quoteLeft
+          )
+        }
+      >
+        <Typography variant="subtitle1" className={classes.quoteBody} gutterBottom>
+          {content}
+        </Typography>
+        <Typography variant="caption">
+          {footnote}
+        </Typography>
+      </div>
+    );
+  }
+}
+
+Quote.propTypes = {
+  align: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  footnote: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Quote);