Añadir plantilla

Base para front

2 files changed, 84 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/BreadCrumb/BreadCrumb.js b/front/odiparpack/app/components/BreadCrumb/BreadCrumb.js
new file mode 100644
index 0000000..0d11753
--- /dev/null
+++ b/front/odiparpack/app/components/BreadCrumb/BreadCrumb.js
@@ -0,0 +1,55 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { Link, Route } from 'react-router-dom';
+import styles from './breadCrumb-jss';
+
+const Breadcrumbs = (props) => {
+  const {
+    classes,
+    theme,
+    separator,
+    location
+  } = props;
+  return (
+    <section className={classNames(theme === 'dark' ? classes.dark : classes.light, classes.breadcrumbs)}>
+      <Route
+        path="*"
+        render={() => {
+          let parts = location.pathname.split('/');
+          const place = parts[parts.length - 1];
+          parts = parts.slice(1, parts.length - 1);
+          return (
+            <p>
+              You are here:
+              <span>
+                {
+                  parts.map((part, partIndex) => {
+                    const path = ['', ...parts.slice(0, partIndex + 1)].join('/');
+                    return (
+                      <Fragment key={path}>
+                        <Link to={path}>{part}</Link>
+                        { separator }
+                      </Fragment>
+                    );
+                  })
+                }
+                &nbsp;{place}
+              </span>
+            </p>
+          );
+        }}
+      />
+    </section>
+  );
+};
+
+Breadcrumbs.propTypes = {
+  classes: PropTypes.object.isRequired,
+  location: PropTypes.object.isRequired,
+  theme: PropTypes.string.isRequired,
+  separator: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(Breadcrumbs);
diff --git a/front/odiparpack/app/components/BreadCrumb/breadCrumb-jss.js b/front/odiparpack/app/components/BreadCrumb/breadCrumb-jss.js
new file mode 100644
index 0000000..fe2dc47
--- /dev/null
+++ b/front/odiparpack/app/components/BreadCrumb/breadCrumb-jss.js
@@ -0,0 +1,29 @@
+const styles = theme => ({
+  dark: {},
+  breadcrumbs: {
+    position: 'relative',
+    display: 'block',
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.5)',
+    '& p': {
+      display: 'block',
+      '& span': {
+        textTransform: 'capitalize',
+        marginLeft: 5,
+      },
+      '& a': {
+        color: theme.palette.common.white,
+        textDecoration: 'none',
+        margin: '0 5px'
+      }
+    },
+    '&$dark': {
+      color: theme.palette.grey[900],
+      '& a': {
+        color: theme.palette.grey[900]
+      }
+    }
+  }
+});
+
+export default styles;