From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 front/odiparpack/app/components/Quote/Quote.js | 81 ++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 front/odiparpack/app/components/Quote/Quote.js

(limited to 'front/odiparpack/app/components/Quote')

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);
-- 
cgit v1.2.3