1 files changed, 55 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);